fix(studio): my published packages list as rows, and the market group stays flat on hover and focus

desktop/frontend-next/src/design/settings.css

@@ -300,7 +300,7 @@
 @container (max-width: 720px) { .ext-md { grid-template-columns: minmax(0, 1fr); } .ext-detail-pane { position: static; } }
 .ext-md-list .srv .srv-sub > .fold::before { display: none; }
 
-.mkt .mkt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
+.mkt .mkt-list:not([data-rows]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
 .mkt-card { position: relative; min-width: 0; }
 .mkt-card > .mkt-row {
   display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; padding: 14px; box-sizing: border-box;
@@ -314,7 +314,7 @@
 .mkt-who .nm { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text); font: var(--w-semi) var(--fs-ui) var(--ui); overflow-wrap: anywhere; }
 .mkt-verified { flex: none; width: 13px; height: 13px; color: var(--ok-ink); }
 .mkt-who .mkt-id { overflow: hidden; color: var(--faint); font: var(--w-med) var(--fs-micro) var(--ui); white-space: nowrap; text-overflow: ellipsis; }
-.mkt-state { position: absolute; top: 20px; inset-inline-end: 14px; color: var(--ok-ink); font: var(--w-med) var(--fs-meta) var(--ui); }
+.mkt-card .mkt-state { position: absolute; top: 20px; inset-inline-end: 14px; color: var(--ok-ink); font: var(--w-med) var(--fs-meta) var(--ui); }
 .mkt-card > .mkt-row > .mkt-sum { display: -webkit-box; overflow: hidden; color: var(--muted); font: var(--w-med) var(--fs-meta)/1.6 var(--ui); -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 3.2em; }
 .mkt-card-ft { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; }
 .mkt-card-ft .mkt-pinned { padding: 0 7px; border-radius: var(--r-pill); background: var(--overlay); color: var(--muted); font: var(--w-med) var(--fs-micro)/1.8 var(--ui); }
@@ -356,3 +356,7 @@
 @container prefsmain (max-width: 900px) { .usage .ucharts, .usage .utiles { grid-template-columns: minmax(0, 1fr); } }
 .prefs-sheet[data-solo="usage"] #set-usage > :is(.grp-hd, .hint, .apply) { display: none; }
 .grp[data-setting="market"], .grp[data-setting="market"]:hover { margin: 0; padding: 4px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
+.mkt .mkt-list[data-rows] { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
+.mkt .mkt-list[data-rows] > .mkt-row { padding: 12px 2px; border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; }
+.mkt .mkt-list[data-rows] .mkt-meta { overflow: visible; white-space: normal; }
+.ext-md-list .grp:focus-within, .grp[data-setting="market"]:focus-within { box-shadow: none; }

desktop/frontend-next/src/styles/studio.css

@@ -2798,9 +2798,9 @@ button, input, textarea { font-size: var(--fs-ui); }
 }
 .grp { border: 1px solid var(--hair); }
 @media (hover: hover) {
-  .grp:hover { background: color-mix(in srgb, var(--float) 84%, var(--surface)) !important; }
+  .grp:hover:not(.ext-md-list .grp, [data-setting="market"]) { background: color-mix(in srgb, var(--float) 84%, var(--surface)) !important; }
 }
-.grp:focus-within {
+.grp:focus-within:not(.ext-md-list .grp, [data-setting="market"]) {
   background: color-mix(in srgb, var(--float) 94%, var(--accent-wash)) !important;
 }
 .advset:not(.appearance-advanced) > .grp { background: transparent !important; box-shadow: none; }
@@ -3001,7 +3001,7 @@ button, input, textarea { font-size: var(--fs-ui); }
   background: color-mix(in srgb, var(--raised) 90%, var(--surface)) !important;
   border-color: var(--hair) !important;
 }
-:root[data-theme="dark"] .grp:focus-within {
+:root[data-theme="dark"] .grp:focus-within:not(.ext-md-list .grp, [data-setting="market"]) {
   background: color-mix(in srgb, var(--raised) 94%, var(--accent-wash)) !important;
 }
 

desktop/frontend-next/src/ui/MarketOwn.interaction.test.tsx

@@ -21,6 +21,15 @@ async function openMine(port: AgentPort, onInstalled = () => {}, onViewInstalled
 }
 
 describe("the account's own packages", () => {
+  it("lists each version as a row of its own, not as a market card", async () => {
+    const port = new MockPort() as unknown as AgentPort;
+    const { container } = render(<MyPackages port={port} onInstalled={() => {}} />);
+    await screen.findByText("ship-notes");
+    const list = container.querySelector("ul.mkt-list")!;
+    expect(list.hasAttribute("data-rows")).toBe(true);
+    expect(list.querySelector(".mkt-card")).toBeNull();
+  });
+
   it.each(["success", "failure"])("ignores a stale list %s after replacing the port", async (outcome) => {
     const port = new MockPort() as unknown as AgentPort;
     const next = new MockPort() as unknown as AgentPort;

desktop/frontend-next/src/ui/MarketPublish.tsx

@@ -271,7 +271,7 @@ function PackageList({ port, onInstalled, onViewInstalled, onApplying, onPublish
       )}
       {rows === null && <div className="empty" role="status">{t("common.loading")}</div>}
       {rows?.length === 0 && !error && <div className="empty">{t("ext.nothing_published_yet")}</div>}
-      <ul className="mkt-list">
+      <ul className="mkt-list" data-rows="">
         {rows?.map((p) => {
           const [label, tone] = STATUS[p.status] ?? [p.status, undefined];
           const current = !!p.installed && p.installed.version === p.latestVersion;