@zihanw/pi-forge 0.5.4 → 0.5.6

package/dist/web-editor/styles.js

@@ -1,23 +1,27 @@
 export const EDITOR_STYLES = String.raw `
 :root {
   color-scheme: light;
-  --bg: #f7f8fb;
+  --bg: #f5f8f7;
   --pane: #ffffff;
-  --line: #d8dee8;
-  --line-strong: #aeb8c7;
-  --text: #18202c;
-  --muted: #647083;
-  --accent: #146b5f;
-  --accent-bg: #e5f3ef;
-  --warning: #9b6200;
-  --warning-bg: #fff4d8;
+  --line: #d7e3de;
+  --line-strong: #a9bdb5;
+  --text: #20312f;
+  --muted: #657774;
+  --accent: #176c5b;
+  --accent-bg: #e9f4f0;
+  --warning: #8b5d10;
+  --warning-bg: #fff4dc;
   --error: #b42318;
   --error-bg: #fde8e7;
-  --success: #1f7a3a;
+  --success: #20764b;
   --role-system: #7564a8;
   --role-user: #2f7d68;
   --role-assistant: #3e76ad;
   --role-tool-result: #b16b2e;
+  --item-off-bg: #eef0ef;
+  --item-off-text: #6b7570;
+  --item-off-line: #bac3be;
+  --item-off-selected: #87978e;
   --item-block: #4f6f9f;
   --item-slot: #8b5fa8;
   --slot-chat-history: #2f8a78;
@@ -39,14 +43,14 @@ export const EDITOR_STYLES = String.raw `
 }
 body[data-theme="dark"] {
   color-scheme: dark;
-  --bg: #111315;
-  --pane: #181a1d;
-  --line: #32363b;
-  --line-strong: #525a63;
-  --text: #edf0f2;
-  --muted: #a0a8b2;
-  --accent: #2aa889;
-  --accent-bg: #15362f;
+  --bg: #111716;
+  --pane: #19211f;
+  --line: #33413d;
+  --line-strong: #536761;
+  --text: #e7efeb;
+  --muted: #a4b3ad;
+  --accent: #3dbb99;
+  --accent-bg: #173b33;
   --warning: #e4b75f;
   --warning-bg: #3a2d13;
   --error: #f06f64;
@@ -56,6 +60,10 @@ body[data-theme="dark"] {
   --role-user: #65c6a9;
   --role-assistant: #82b9ef;
   --role-tool-result: #e5ad70;
+  --item-off-bg: #131917;
+  --item-off-text: #7d8b83;
+  --item-off-line: #3b4942;
+  --item-off-selected: #788a80;
   --item-block: #88a9dc;
   --item-slot: #c59be0;
   --slot-chat-history: #70d0ba;
@@ -67,10 +75,10 @@ body[data-theme="dark"] {
   --slot-date-cwd: #b697dc;
   --slot-built-in: #a9bacb;
   --slot-custom: #d0a5c3;
-  --control: #202327;
-  --control-muted: #25292e;
-  --pane-soft: #151719;
-  --row: #1c1f23;
+  --control: #202a27;
+  --control-muted: #25312e;
+  --pane-soft: #151d1b;
+  --row: #1c2623;
   --code-bg: #0b0d10;
   --code-text: #e8edf2;
   --shadow: rgba(0, 0, 0, .42);
@@ -105,20 +113,25 @@ button[data-icon]::before {
   color: currentColor;
 }
 button.icon[data-icon]::before {
-  margin-right: 0;
+  margin:0; font-size:14px; line-height:30px;
 }
 button.primary {
   border-color: var(--accent);
   background: var(--accent);
   color: white;
 }
+button.quiet-danger {
+  background:transparent; border-color:transparent; color:var(--muted);
+}
+button.quiet-danger:hover, button.quiet-danger:focus-visible {
+  border-color:var(--error); color:var(--error);
+}
 button.danger {
   border-color: var(--error);
   color: var(--error);
 }
 button.icon {
-  width: 34px;
-  padding: 5px 0;
+  width:32px; height:32px; min-height:32px; flex:0 0 32px; padding:0; font-size:0; overflow:hidden;
 }
 button:disabled {
   cursor: default;
@@ -153,14 +166,7 @@ html, body {
   }
 }
 .topbar {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  min-height: 40px;
-  padding: 4px 10px;
-  border-bottom: 1px solid var(--line);
-  background: var(--pane);
+  display:flex; align-items:center; gap:8px; flex:none; min-height:32px; padding:3px 10px; border-top:1px solid var(--line); background:var(--pane); font-size:12px;
 }
 .brand {
   font-weight: 700;
@@ -190,7 +196,7 @@ html, body {
 }
 .shell {
   display: grid;
-  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
+  grid-template-columns: var(--preset-pane-width, 212px) minmax(0, 1fr);
   height: calc(100vh - 48px);
   min-height: 0;
   transition: grid-template-columns .16s ease;
@@ -199,6 +205,8 @@ html, body {
   grid-template-columns: 0 minmax(0, 1fr);
 }
 .sidebar {
+  position: relative;
+  padding-right: 8px;
   border-right: 1px solid var(--line);
   background: var(--pane);
   min-width: 0;
@@ -207,8 +215,39 @@ html, body {
   flex-direction: column;
 }
 .shell.sidebar-collapsed .sidebar {
+  padding-right: 0;
   border-right: 0;
 }
+.pane-width-handle {
+  position: absolute;
+  inset: 0 0 0 auto;
+  width: 8px;
+  z-index: 3;
+  cursor: col-resize;
+  touch-action: none;
+}
+.pane-width-handle::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 0 auto;
+  width: 2px;
+  background: transparent;
+}
+.pane-width-handle:hover::after,
+.pane-width-handle:focus-visible::after {
+  background: var(--accent);
+}
+.pane-width-handle:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: -2px;
+}
+.shell.sidebar-collapsed #presetWidthHandle { display: none; }
+.shell.pane-width-dragging { transition: none; }
+.shell.pane-width-dragging,
+.shell.pane-width-dragging * { cursor: col-resize !important; user-select: none !important; }
+@media (max-width: 800px) {
+  .pane-width-handle { display: none; }
+}
 .side-head {
   padding: 9px 10px;
   border-bottom: 1px solid var(--line);
@@ -285,16 +324,7 @@ html, body {
   flex-direction: column;
 }
 .main-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: nowrap;
-  min-height: 42px;
-  padding: 5px 10px;
-  border-bottom: 1px solid var(--line);
-  background: var(--pane);
-  position: relative;
-  z-index: 3;
+  display:flex; flex-wrap:wrap; align-items:center; gap:5px; position:relative; z-index:3; flex:0 1 auto; padding:0; border:0; background:transparent;
 }
 .new-stack-control {
   display: flex;
@@ -438,7 +468,7 @@ html, body {
 }
 .workspace {
   display: grid;
-  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
+  grid-template-columns: var(--stack-pane-width, 190px) minmax(0, 1fr);
   flex: 1;
   min-height: 0;
 }
@@ -470,33 +500,12 @@ html, body {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
 }
-.editor-dock-area.dock-open {
-  grid-template-columns: minmax(0, 1fr) minmax(440px, 48%);
-}
 .editor-dock-area .workspace,
 .editor-dock-area .tab-panel,
 .editor-dock-area .context-diff-panel {
   min-width: 0;
   min-height: 0;
 }
-.editor-dock-area.dock-open .workspace {
-  display: grid;
-  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
-  border-right: 1px solid var(--line);
-}
-.editor-dock-area.dock-open .context-diff-panel {
-  display: block;
-  border-left: 1px solid var(--line);
-}
-.editor-dock-area.dock-open.dock-focus {
-  grid-template-columns: minmax(0, 1fr);
-}
-.editor-dock-area.dock-open.dock-focus .workspace {
-  display: none;
-}
-.editor-dock-area.dock-open.dock-focus .context-diff-panel {
-  border-left: 0;
-}
 .tab-section {
   border: 1px solid var(--line);
   border-radius: 6px;
@@ -514,6 +523,8 @@ html, body {
   margin-bottom: 10px;
 }
 .items-pane {
+  position: relative;
+  padding-right: 8px;
   border-right: 1px solid var(--line);
   background: var(--pane);
   min-width: 0;
@@ -530,22 +541,6 @@ html, body {
   border-bottom: 1px solid var(--line);
   font-weight: 650;
 }
-.item-tools {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--line);
-  flex: 0 0 auto;
-}
-.item-tools button,
-.main-actions button {
-  white-space: nowrap;
-}
-.item-tools-spacer {
-  flex: 1 1 auto;
-  min-width: 8px;
-}
 .item-list {
   padding: 8px;
   overflow: auto;
@@ -556,20 +551,7 @@ html, body {
   background: var(--accent-bg);
 }
 .item-row {
-  width: 100%;
-  text-align: left;
-  border: 1px solid var(--line);
-  border-left-width: 3px;
-  background: var(--row);
-  border-radius: 6px;
-  padding: 8px;
-  margin-bottom: 6px;
-  display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) 48px;
-  gap: 8px;
-  align-items: center;
-  cursor: grab;
-  position: relative;
+  width:100%; text-align:left; border:1px solid transparent; border-left:2px solid var(--line); border-bottom-color:var(--line); background:transparent; border-radius:5px; padding:8px 7px 8px 20px; margin-bottom:3px; display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:3px 6px; align-items:center; cursor:grab; position:relative;
 }
 .item-row:active {
   cursor: grabbing;
@@ -581,19 +563,26 @@ html, body {
   border-left-color: var(--item-slot);
 }
 .item-row.selected {
-  border-top-color: var(--accent);
-  border-right-color: var(--accent);
-  border-bottom-color: var(--accent);
+  border-color: var(--accent);
   background: var(--accent-bg);
 }
-.item-row.selected.kind-block {
-  border-left-color: var(--item-block);
+.item-row.disabled {
+  background: var(--item-off-bg);
+  border-left-color: var(--item-off-line);
+  border-bottom-color: var(--item-off-line);
 }
-.item-row.selected.kind-slot {
-  border-left-color: var(--item-slot);
+.item-row.disabled.selected {
+  border-color: var(--item-off-selected);
+  border-left-color: var(--item-off-line);
+  background: var(--item-off-bg);
 }
-.item-row.disabled {
-  opacity: .62;
+.item-row.disabled .item-title,
+.item-row.disabled .item-meta,
+.item-row.disabled .drag-handle {
+  color: var(--item-off-text);
+}
+.item-row.disabled .item-title {
+  font-weight: 500;
 }
 .item-row.dragging {
   border-style: dashed;
@@ -626,22 +615,58 @@ html, body {
   user-select: none;
 }
 .item-toggle {
-  width: 44px;
-  min-height: 26px;
-  padding: 2px 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 46px;
+  min-height: 28px;
+  height: 28px;
+  padding: 0 4px;
   border-radius: 999px;
-  font-size: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.01em;
   cursor: pointer;
+  box-sizing: border-box;
+  user-select: none;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+.item-toggle::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex: 0 0 6px;
 }
 .item-toggle.enabled {
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: #ffffff;
+}
+.item-toggle.enabled::before {
+  background: currentColor;
+}
+body[data-theme="dark"] .item-toggle.enabled {
   border-color: var(--accent);
   background: var(--accent);
-  color: white;
+  color: #0b1a16;
 }
 .item-toggle.disabled {
-  border-color: var(--line-strong);
-  background: var(--control-muted);
-  color: var(--muted);
+  border: 1px solid var(--line-strong);
+  background: var(--control);
+  color: var(--text);
+}
+.item-toggle.disabled::before {
+  border: 1.5px solid currentColor;
+  box-sizing: border-box;
+  background: transparent;
+}
+.item-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
 }
 .item-badge {
   display: inline-block;
@@ -662,40 +687,8 @@ html, body {
   background: var(--warning-bg);
   border-color: var(--warning);
 }
-.item-kind-badge,
-.item-slot-badge {
-  display: inline-block;
-  border: 1px solid currentColor;
-  border-radius: 999px;
-  padding: 0 6px;
-  line-height: 17px;
-  font-size: 11px;
-  font-weight: 650;
-}
-.item-kind-badge {
-  margin-right: 4px;
-}
-.item-kind-badge.block {
-  color: var(--item-block);
-  background: color-mix(in srgb, var(--item-block) 12%, var(--row));
-}
-.item-kind-badge.slot {
-  color: var(--item-slot);
-  background: color-mix(in srgb, var(--item-slot) 12%, var(--row));
-}
-.item-slot-badge {
-  margin-left: 2px;
-}
-.item-slot-badge.slot-chat-history { color: var(--slot-chat-history); background: color-mix(in srgb, var(--slot-chat-history) 12%, var(--row)); }
-.item-slot-badge.slot-tools { color: var(--slot-tools); background: color-mix(in srgb, var(--slot-tools) 12%, var(--row)); }
-.item-slot-badge.slot-tool-guidelines { color: var(--slot-tool-guidelines); background: color-mix(in srgb, var(--slot-tool-guidelines) 12%, var(--row)); }
-.item-slot-badge.slot-skills { color: var(--slot-skills); background: color-mix(in srgb, var(--slot-skills) 12%, var(--row)); }
-.item-slot-badge.slot-project-context { color: var(--slot-project-context); background: color-mix(in srgb, var(--slot-project-context) 12%, var(--row)); }
-.item-slot-badge.slot-date { color: var(--slot-date); background: color-mix(in srgb, var(--slot-date) 12%, var(--row)); }
-.item-slot-badge.slot-date-cwd { color: var(--slot-date-cwd); background: color-mix(in srgb, var(--slot-date-cwd) 12%, var(--row)); }
-.item-slot-badge.slot-built-in { color: var(--slot-built-in); background: color-mix(in srgb, var(--slot-built-in) 12%, var(--row)); }
-.item-slot-badge.slot-custom { color: var(--slot-custom); background: color-mix(in srgb, var(--slot-custom) 12%, var(--row)); }
 .item-title {
+  font-size: 13px;
   font-weight: 650;
   overflow-wrap: anywhere;
 }
@@ -732,6 +725,7 @@ html, body {
   gap: 10px;
   flex: 0 0 auto;
 }
+.slot-flags { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 24px; }
 .item-body {
   flex: 1;
   min-height: 0;
@@ -774,13 +768,7 @@ html, body {
   color: var(--accent);
 }
 .options-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(150px, 1fr));
-  gap: 10px;
-  overflow: auto;
-  padding-right: 4px;
-  flex: 1;
-  min-height: 0;
+  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); align-content:start; align-items:start; gap:14px 16px; overflow:auto; padding-right:4px; flex:1; min-height:0;
 }
 .option-note {
   color: var(--muted);
@@ -1012,6 +1000,48 @@ html, body {
   padding: 12px;
   background: var(--pane-soft);
 }
+.modal-dialog.resource-modal {
+  align-self: center;
+  width: min(560px, calc(100vw - 32px));
+  height: auto;
+  max-height: calc(100vh - 32px);
+}
+.resource-form {
+  display: grid;
+  gap: 6px;
+  max-width: 480px;
+  margin: 0 auto;
+}
+.resource-form label {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+/* New-preset choices share the existing resource dialog and scroll container. */
+.template-options { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px; }
+.template-option { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--pane); cursor: pointer; }
+.template-option:hover { border-color: var(--line-strong); }
+.template-option:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
+.template-option input[type="radio"] { margin: 2px 0 0; width: auto; flex: none; cursor: pointer; accent-color: var(--accent); }
+.template-option:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
+.template-option-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.template-option-title { font-size: 13px; font-weight: 600; color: var(--text); }
+.template-option-desc { font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.4; }
+.resource-form-note {
+  margin: 6px 0 2px;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  color: var(--warning);
+  background: var(--warning-bg);
+  font-size: 12px;
+}
+.resource-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
 .modal-toolbar {
   display: flex;
   gap: 8px;
@@ -1249,17 +1279,7 @@ html, body {
   .workspace {
     display: block;
   }
-  .editor-dock-area.dock-open,
-  .editor-dock-area.dock-open.dock-focus {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .editor-dock-area.dock-open .workspace {
-    display: none;
-  }
-  .editor-dock-area.dock-open .context-diff-panel {
-    border-left: 0;
-  }
-  .item-form {
+        .item-form {
     height: auto;
     overflow: visible;
   }
@@ -1279,11 +1299,14 @@ html, body {
     min-height: calc(100vh - 80px);
   }
   .sidebar, .items-pane {
+    padding-right: 0;
     border-right: 0;
     border-bottom: 1px solid var(--line);
   }
+  .shell.sidebar-collapsed { grid-template-columns:minmax(0,1fr); }
+  .shell.sidebar-collapsed .sidebar { display:none; }
   .sidebar {
-    min-height: 180px;
+    min-height: 0;
     max-height: 240px;
   }
   .metadata-head {
@@ -1332,5 +1355,390 @@ html, body {
     font-size: 14px;
   }
 }
+
+/* V4 workspace: the library owns creation/reload; the editor header owns identity. */
+.topbar .brand {
+  display: none;
+}
+.resource-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  min-width: 0;
+  padding: 4px 10px;
+  border-bottom: 1px solid var(--line);
+  background: var(--pane);
+}
+.resource-identity,
+.resource-title-line,
+.resource-subline {
+  min-width: 0;
+}
+.resource-title-line {
+  display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0;
+}
+.resource-title-line h1 {
+  flex:0 1 auto; min-width:0; max-width:100%; margin:0; font-size:18px; line-height:1.3; font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
+}
+.resource-subline {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.resource-subline code {
+  color: var(--accent);
+  overflow-wrap: anywhere;
+}
+.resource-editing-label {
+  flex: 0 0 auto;
+  color: var(--muted);
+  font-size: 11px;
+}
+.runtime-badge {
+  flex: 0 0 auto;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 1px 7px;
+  color: var(--muted);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.runtime-badge.active {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-bg);
+}
+.side-head {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 8px;
+}
+.side-head-title {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.library-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+.library-actions select {
+  width: auto;
+  min-width: 74px;
+  padding: 4px 6px;
+  font-size: 12px;
+}
+.library-actions button {
+  font-size: 12px;
+  min-height: 30px;
+  padding: 4px 7px;
+  white-space: nowrap;
+}
+.library-actions #reloadBtn {
+  width: 30px;
+  padding-inline: 0;
+  overflow: hidden;
+  color: transparent;
+  font-size: 0;
+}
+.library-actions #reloadBtn::before {
+  margin-right: 0;
+  color: var(--text);
+  font-size: 14px;
+}
+.resource-header .resource-identity {
+  flex:1 1 280px; min-width:min(280px,100%);
+}
+.resource-header .main-actions .action-spacer {
+  min-width: 4px;
+}
+.item-row:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.item-row.disabled:focus-visible {
+  outline-color: var(--item-off-selected);
+}
+.item-title {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: var(--text);
+}
+.item-meta {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: normal;
+}
+.item-form {
+  gap: 8px;
+  padding: 14px 16px;
+}
+.item-primary-field {
+  flex: 0 0 auto;
+}
+.item-primary-field label {
+  color: var(--text);
+  font-weight: 650;
+}
+.item-primary-field input {
+  min-height: 36px;
+  font-size: 15px;
+}
+.item-technical-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+.role-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  color: var(--text);
+  font-size: 12px;
+}
+.role-control select {
+  width: auto;
+  min-width: 88px;
+  min-height: 30px;
+  padding: 3px 22px 3px 5px;
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: var(--text);
+  font-size: 14px;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23677770' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
+  background-position: right 3px center;
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+}
+.role-control select:hover,
+.role-control select:focus-visible {
+  border-color: var(--line);
+  background: var(--accent-bg);
+}
+.item-properties {
+  position: relative;
+  flex: 0 0 auto;
+}
+.item-properties > summary {
+  cursor: pointer;
+  list-style: none;
+  color: var(--muted);
+  padding: 3px 5px;
+  border-radius: 4px;
+}
+.item-properties > summary::-webkit-details-marker {
+  display: none;
+}
+.item-properties > summary::after {
+  content: "⌄";
+  margin-left: 4px;
+  font-size: 16px;
+  line-height: 12px;
+  vertical-align: -1px;
+}
+.item-properties[open] > summary::after {
+  content: "⌃";
+}
+.item-properties > summary:hover,
+.item-properties > summary:focus-visible {
+  color: var(--accent);
+  background: var(--accent-bg);
+  outline: none;
+}
+.item-properties-popover {
+  position:fixed; z-index:4; display:grid; grid-template-columns:1fr; gap:10px; width:min(330px,calc(100vw - 32px)); max-height:65vh; overflow:auto; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--pane); box-shadow:0 8px 24px var(--shadow);
+}
+.item-properties-popover .field:last-child {
+  grid-column: 1 / -1;
+}
+.item-body {
+  min-width: 0;
+}
+.content-field {
+  min-width: 0;
+}
+.content-field textarea {
+  color: var(--text);
+  background: var(--control);
+  line-height: 1.6;
+}
+.metadata-details > summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 5px 10px;
+  cursor: pointer;
+  list-style: none;
+  color: var(--muted);
+  font-size: 12px;
+}
+.metadata-details > summary::-webkit-details-marker {
+  display: none;
+}
+.metadata-details > summary::before {
+  content: "▸";
+  color: var(--accent);
+}
+.metadata-details[open] > summary::before {
+  content: "▾";
+}
+.metadata-summary-title {
+  flex: 0 0 auto;
+  color: var(--text);
+  font-weight: 650;
+}
+.metadata-details .metadata-summary {
+  margin: 0;
+}
+@media (max-width: 900px) {
+  .resource-header {
+    padding: 5px 10px;
+  }
+  .resource-header .main-actions {
+    flex: 1 1 auto;
+  }
+  .resource-editing-label {
+    display: none;
+  }
+  .library-actions {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+  .library-actions select {
+    max-width: 82px;
+  }
+}
+@media (max-width: 520px) {
+  .side-head {
+    display: block;
+  }
+  .library-actions {
+    margin-top: 7px;
+    justify-content: flex-start;
+  }
+  .resource-title-line h1 {
+    font-size: 16px;
+  }
+}
+
+.item-row .drag-handle { position: absolute; left: 3px; top: 13px; font-size: 14px; width: 12px; }
+.item-row > div:not(.drag-handle) { min-width: 0; }
+.item-row .item-title { grid-column:1; grid-row:1; }
+.item-row .item-toggle { grid-column:2; grid-row:1; }
+.stack-row { display: flex; flex-direction: column; align-items: stretch; }
+.stack-row .stack-meta:nth-child(2) { order: -1; font-size: 13px; color: var(--text); font-weight: 650; margin-top: 0; }
+.stack-row .stack-name { font-size: 11px; color: var(--muted); margin-top: 4px; }
+.view-tabs { gap: 18px; padding: 0 12px; }
+.view-tabs button { border: 0; border-radius: 0; background: transparent; padding: 7px 2px; position: relative; }
+.view-tabs button[data-icon]::before { display: none; }
+.view-tabs button.active { background: transparent; color: var(--accent); }
+.view-tabs button.active::after { content: ""; position: absolute; bottom: 0; height: 2px; left: 0; right: 0; background: var(--accent); }
+.library-actions { flex-wrap: nowrap; }
+@media(max-width:520px) { .view-tabs { gap: 14px; } }
+
+.stack-list, .item-list { flex: 0 1 auto; }
+.side-head { flex-direction: row; align-items: flex-start; }
+.side-head .library-actions { flex: 0 0 auto; }
+.side-head .cwd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Second-pass workspace polish: keep creation and item operations close to their
+   owning list/editor, while the preview remains a separate dock column. */
+.library-create {
+  flex: 0 0 auto;
+  display: grid;
+  gap: 5px;
+  padding: 10px 8px 12px;
+  border-top: 1px solid var(--line);
+  background: var(--pane-soft);
+}
+.library-create #newStackBtn {
+  width: 100%;
+  margin-top: 2px;
+  border-style: dashed;
+  justify-content: center;
+}
+.item-add-wrap {
+  position: relative;
+  flex: 0 0 auto;
+  padding: 8px 12px 12px;
+  border-top: 1px solid var(--line);
+  background: var(--pane);
+}
+.item-add-wrap > .outline-add {
+  width: 100%;
+  border-style: dashed;
+  color: var(--muted);
+}
+.add-content-menu {
+  position: absolute;
+  z-index: 5;
+  left: 12px;
+  right: 12px;
+  bottom: calc(100% - 4px);
+  display: grid;
+  gap: 4px;
+  padding: 6px;
+  border: 1px solid var(--line-strong);
+  border-radius: 7px;
+  background: var(--pane);
+  box-shadow: 0 8px 24px var(--shadow);
+}
+.add-content-menu[hidden] {
+  display: none;
+}
+.add-content-menu button {
+  width: 100%;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  text-align: left;
+  border-color: transparent;
+}
+.add-content-menu button small {
+  grid-column: 2;
+  color: var(--muted);
+  font-size: 11px;
+}
+.view-tabs [data-dock-tab] {
+  margin-left: auto;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  background: var(--pane-soft);
+  padding-inline: 10px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.view-tabs [data-dock-tab].active {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+  color: var(--accent);
+}
+.view-tabs [data-dock-tab].active::after {
+  display: none;
+}
+
+
+/* Navigation has one summary line, not a second miniature form. */
+.item-row .item-meta { grid-column:1 / -1; margin:0; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.preset-properties-entry { flex:0 0 auto; }
 `;
 //# sourceMappingURL=styles.js.map