@elytracms/studio 0.0.41 → 0.0.42

package/dist/components/inspector/inspector-sidebar.js

@@ -1,7 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelRight } from 'lucide-react';
 import { useState } from 'react';
 import { Row, Text } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
+/**
+ * When the sidebar carries this many panes or more, inactive tabs collapse to their
+ * icon alone (label in a tooltip + `aria-label`) so the tab strip stops overflowing
+ * (0.0.42, round 3). 1–2 panes keep their full labels.
+ */
+const ICON_COLLAPSE_THRESHOLD = 3;
+/** Fallback icon for a pane that declares none — so an icon-collapsed tab is never blank. */
+function paneIcon(pane) {
+    return pane.icon ?? _jsx(PanelRight, { className: "size-3.5" });
+}
 export function InspectorSidebar({ panes, className, activeId: controlledId, onActiveChange, }) {
     const [internalId, setInternalId] = useState(() => panes[0]?.id);
     const activeId = controlledId ?? internalId;
@@ -15,9 +26,15 @@ export function InspectorSidebar({ panes, className, activeId: controlledId, onA
     const active = panes.find((pane) => pane.id === activeId) ?? panes[0];
     if (!active)
         return null;
-    return (_jsxs("div", { className: cn('flex h-full min-h-0 flex-col bg-card', className), children: [_jsx(Row, { gap: "1", className: "shrink-0 border-b border-border p-1.5", children: panes.map((pane) => (_jsx(PaneTab, { pane: pane, active: pane.id === active.id, onClick: () => select(pane.id) }, pane.id))) }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: active.render() })] }));
+    // 0.0.42: with a crowded tab strip (3+ panes) the inactive tabs collapse to icons so
+    // the labels stop overflowing; the active tab always keeps its icon + label.
+    const collapseInactive = panes.length >= ICON_COLLAPSE_THRESHOLD;
+    return (_jsxs("div", { className: cn('flex h-full min-h-0 flex-col bg-card', className), children: [_jsx(Row, { gap: "1", className: "shrink-0 border-b border-border p-1.5", children: panes.map((pane) => {
+                    const isActive = pane.id === active.id;
+                    return (_jsx(PaneTab, { pane: pane, active: isActive, showLabel: isActive || !collapseInactive, onClick: () => select(pane.id) }, pane.id));
+                }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: active.render() })] }));
 }
-function PaneTab({ pane, active, onClick, }) {
-    return (_jsxs("button", { type: "button", "aria-pressed": active, onClick: onClick, className: cn('inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 transition-colors', active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted'), children: [pane.icon, _jsx(Text, { as: "span", size: "xs", weight: "medium", className: "leading-none", children: pane.label }), pane.badge] }));
+function PaneTab({ pane, active, showLabel, onClick, }) {
+    return (_jsxs("button", { type: "button", "aria-pressed": active, "aria-label": showLabel ? undefined : pane.label, title: showLabel ? undefined : pane.label, onClick: onClick, className: cn('inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 transition-colors', active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted'), children: [paneIcon(pane), showLabel ? (_jsx(Text, { as: "span", size: "xs", weight: "medium", className: "leading-none", children: pane.label })) : null, pane.badge] }));
 }
 //# sourceMappingURL=inspector-sidebar.js.map

package/dist/components/inspector/inspector-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"inspector-sidebar.js","sourceRoot":"","sources":["../../../src/components/inspector/inspector-sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,EAAE,EAAE,MAAM,6BAA6B,CAAA;AA0BhD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,cAAc,GAWf;IACC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IACpF,MAAM,QAAQ,GAAG,YAAY,IAAI,UAAU,CAAA;IAC3C,MAAM,MAAM,GAAG,CAAC,EAAU,EAAE,EAAE;QAC5B,IAAI,YAAY,KAAK,SAAS;YAAE,aAAa,CAAC,EAAE,CAAC,CAAA;QACjD,cAAc,EAAE,CAAC,EAAE,CAAC,CAAA;IACtB,CAAC,CAAA;IACD,8EAA8E;IAC9E,qEAAqE;IACrE,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAA;IACrE,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAA;IAExB,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,sCAAsC,EAAE,SAAS,CAAC,aACnE,KAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,SAAS,EAAC,uCAAuC,YAC3D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,OAAO,IAEN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAHzB,IAAI,CAAC,EAAE,CAIZ,CACH,CAAC,GACE,EACN,cAAK,SAAS,EAAC,8BAA8B,YAAE,MAAM,CAAC,MAAM,EAAE,GAAO,IACjE,CACP,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,EACf,IAAI,EACJ,MAAM,EACN,OAAO,GAKR;IACC,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,kBACC,MAAM,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CACX,2EAA2E,EAC3E,MAAM,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,sCAAsC,CACrF,aAEA,IAAI,CAAC,IAAI,EACV,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,cAAc,YAC/D,IAAI,CAAC,KAAK,GACN,EACN,IAAI,CAAC,KAAK,IACJ,CACV,CAAA;AACH,CAAC","sourcesContent":["import { useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { Row, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\n\n/**\n * EC-224 — the shared, view-supplied inspector sidebar.\n *\n * A generic tabbed frame: it renders whatever {@link InspectorPane}s it is given\n * and owns nothing domain-specific. The OWNER composes the pane list — by\n * convention `panes = [...view.suppliedPanes, versionsPane]`, so a view (the\n * canvas) contributes its context pane (`Properties`) and the frame-owner (the\n * document editor) appends the document-level `Versions` pane. A future rich\n * field editor contributes its own pane the same way, without touching this\n * frame (AD-12 — the canvas is itself just a field editor).\n *\n * Each pane's `render` runs where the frame is mounted, so a pane that needs a\n * scoped context (e.g. the canvas `BuilderProvider` behind `PropertyInspector`)\n * must be supplied by a view that mounts the frame inside that provider.\n */\nexport interface InspectorPane {\n  id: string\n  label: string\n  icon?: ReactNode\n  /** Optional trailing adornment on the tab (e.g. a count badge for `Issues`). */\n  badge?: ReactNode\n  render: () => ReactNode\n}\n\nexport function InspectorSidebar({\n  panes,\n  className,\n  activeId: controlledId,\n  onActiveChange,\n}: {\n  panes: readonly InspectorPane[]\n  className?: string\n  /**\n   * Optionally control which pane is shown (EC-285): the document editor drives\n   * this to open the `Details` pane when a jump-to-field targets a sidebar field.\n   * Uncontrolled (internal state) when omitted.\n   */\n  activeId?: string\n  onActiveChange?: (id: string) => void\n}) {\n  const [internalId, setInternalId] = useState<string | undefined>(() => panes[0]?.id)\n  const activeId = controlledId ?? internalId\n  const select = (id: string) => {\n    if (controlledId === undefined) setInternalId(id)\n    onActiveChange?.(id)\n  }\n  // Derive the active pane defensively so a changed pane list (switching views)\n  // can never render a stale/absent tab — fall back to the first pane.\n  const active = panes.find((pane) => pane.id === activeId) ?? panes[0]\n  if (!active) return null\n\n  return (\n    <div className={cn('flex h-full min-h-0 flex-col bg-card', className)}>\n      <Row gap=\"1\" className=\"shrink-0 border-b border-border p-1.5\">\n        {panes.map((pane) => (\n          <PaneTab\n            key={pane.id}\n            pane={pane}\n            active={pane.id === active.id}\n            onClick={() => select(pane.id)}\n          />\n        ))}\n      </Row>\n      <div className=\"min-h-0 flex-1 overflow-auto\">{active.render()}</div>\n    </div>\n  )\n}\n\nfunction PaneTab({\n  pane,\n  active,\n  onClick,\n}: {\n  pane: InspectorPane\n  active: boolean\n  onClick: () => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={active}\n      onClick={onClick}\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 transition-colors',\n        active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted',\n      )}\n    >\n      {pane.icon}\n      <Text as=\"span\" size=\"xs\" weight=\"medium\" className=\"leading-none\">\n        {pane.label}\n      </Text>\n      {pane.badge}\n    </button>\n  )\n}\n"]}
+{"version":3,"file":"inspector-sidebar.js","sourceRoot":"","sources":["../../../src/components/inspector/inspector-sidebar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PanelRight } from 'lucide-react'\nimport { useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { Row, Text } from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\n\n/**\n * When the sidebar carries this many panes or more, inactive tabs collapse to their\n * icon alone (label in a tooltip + `aria-label`) so the tab strip stops overflowing\n * (0.0.42, round 3). 1–2 panes keep their full labels.\n */\nconst ICON_COLLAPSE_THRESHOLD = 3\n\n/** Fallback icon for a pane that declares none — so an icon-collapsed tab is never blank. */\nfunction paneIcon(pane: InspectorPane): ReactNode {\n  return pane.icon ?? <PanelRight className=\"size-3.5\" />\n}\n\n/**\n * EC-224 — the shared, view-supplied inspector sidebar.\n *\n * A generic tabbed frame: it renders whatever {@link InspectorPane}s it is given\n * and owns nothing domain-specific. The OWNER composes the pane list — by\n * convention `panes = [...view.suppliedPanes, versionsPane]`, so a view (the\n * canvas) contributes its context pane (`Properties`) and the frame-owner (the\n * document editor) appends the document-level `Versions` pane. A future rich\n * field editor contributes its own pane the same way, without touching this\n * frame (AD-12 — the canvas is itself just a field editor).\n *\n * Each pane's `render` runs where the frame is mounted, so a pane that needs a\n * scoped context (e.g. the canvas `BuilderProvider` behind `PropertyInspector`)\n * must be supplied by a view that mounts the frame inside that provider.\n */\nexport interface InspectorPane {\n  id: string\n  label: string\n  icon?: ReactNode\n  /** Optional trailing adornment on the tab (e.g. a count badge for `Issues`). */\n  badge?: ReactNode\n  render: () => ReactNode\n}\n\nexport function InspectorSidebar({\n  panes,\n  className,\n  activeId: controlledId,\n  onActiveChange,\n}: {\n  panes: readonly InspectorPane[]\n  className?: string\n  /**\n   * Optionally control which pane is shown (EC-285): the document editor drives\n   * this to open the `Details` pane when a jump-to-field targets a sidebar field.\n   * Uncontrolled (internal state) when omitted.\n   */\n  activeId?: string\n  onActiveChange?: (id: string) => void\n}) {\n  const [internalId, setInternalId] = useState<string | undefined>(() => panes[0]?.id)\n  const activeId = controlledId ?? internalId\n  const select = (id: string) => {\n    if (controlledId === undefined) setInternalId(id)\n    onActiveChange?.(id)\n  }\n  // Derive the active pane defensively so a changed pane list (switching views)\n  // can never render a stale/absent tab — fall back to the first pane.\n  const active = panes.find((pane) => pane.id === activeId) ?? panes[0]\n  if (!active) return null\n\n  // 0.0.42: with a crowded tab strip (3+ panes) the inactive tabs collapse to icons so\n  // the labels stop overflowing; the active tab always keeps its icon + label.\n  const collapseInactive = panes.length >= ICON_COLLAPSE_THRESHOLD\n\n  return (\n    <div className={cn('flex h-full min-h-0 flex-col bg-card', className)}>\n      <Row gap=\"1\" className=\"shrink-0 border-b border-border p-1.5\">\n        {panes.map((pane) => {\n          const isActive = pane.id === active.id\n          return (\n            <PaneTab\n              key={pane.id}\n              pane={pane}\n              active={isActive}\n              showLabel={isActive || !collapseInactive}\n              onClick={() => select(pane.id)}\n            />\n          )\n        })}\n      </Row>\n      <div className=\"min-h-0 flex-1 overflow-auto\">{active.render()}</div>\n    </div>\n  )\n}\n\nfunction PaneTab({\n  pane,\n  active,\n  showLabel,\n  onClick,\n}: {\n  pane: InspectorPane\n  active: boolean\n  /** When false, the tab renders icon-only — the label moves to the tooltip + aria-label. */\n  showLabel: boolean\n  onClick: () => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={active}\n      aria-label={showLabel ? undefined : pane.label}\n      title={showLabel ? undefined : pane.label}\n      onClick={onClick}\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 transition-colors',\n        active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted',\n      )}\n    >\n      {paneIcon(pane)}\n      {showLabel ? (\n        <Text as=\"span\" size=\"xs\" weight=\"medium\" className=\"leading-none\">\n          {pane.label}\n        </Text>\n      ) : null}\n      {pane.badge}\n    </button>\n  )\n}\n"]}

package/dist/lib/i18n/messages.en.js

@@ -227,8 +227,10 @@ export const EN_MESSAGES = {
     'cms.editor.unsavedChanges': msg('Unsaved changes'),
     'cms.editor.saved': msg('Saved'),
     'cms.editor.saving': msg('Saving…'),
+    // 0.0.42 (round 3): the standalone "View live" button is retired — opening the live
+    // page now hangs off the header URL row's leaf segment. These strings still drive the
+    // leaf's tooltip (open-live target + the published-gating reasons).
     'cms.editor.openLiveUrl': msg('Open {path}'),
-    'cms.editor.viewLive': msg('View live'),
     'cms.editor.loadingLiveUrl': msg('Loading the live URL…'),
     'cms.editor.publishToViewLive': msg('Publish to view the live page'),
     'cms.editor.setFrontendUrlHint': msg('Set frontendUrl in elytra.config.ts to enable'),
@@ -299,10 +301,9 @@ export const EN_MESSAGES = {
     'cms.details.slotInUse': msg(' — in use', 'Suffix on a slot option already taken by another document.'),
     'cms.details.slotHint': msg('A stable name the site uses to find this document (e.g. the main menu), instead of which exact entry it is. One document per slot.'),
     'cms.details.empty': msg('No document properties to set.'),
-    // 0.0.39 — the document-level URL affordance (the EC-315 "hybrid split"): the full
-    // composed path as its own Details row, with ancestor-document segments linking to
-    // their editors and static route segments as plain text.
-    'cms.details.url': msg('URL', 'Details pane section: the document’s composed URL path.'),
+    // The composed-URL affordance (EC-315 "hybrid split") — moved to the detail-editor
+    // HEADER under the title in 0.0.42 (round 3); ancestor-document segments link to
+    // their editors, static route segments are plain, and the leaf carries the live link.
     'cms.details.urlCurrent': msg('this page', 'Tooltip on the final URL segment — the document being edited.'),
     // ─────────────────────────────────────────────────────────────────────────
     // CMS — import dialog