create-obsidian-arrow 0.5.0 → 0.5.2

package/template/tools/sandbox/sandbox.css

@@ -1,5 +1,6 @@
 /*
- * Sandbox-only chrome. NOT ported into the plugin.
+ * Sandbox-only chrome. Uses the `oasbox-` prefix — NOT portable into plugins.
+ * For portable utilities (oas-*) see src/utilities.css.
  *
  * Per the arrow-js-obsidian CSS-specificity lesson, every custom rule is scoped
  * under a container class + element type so it can't lose to Obsidian's global
@@ -21,13 +22,13 @@ body {
 }
 
 /* Shell: width-control toolbar on top, pane stage below. */
-.oas-shell {
+.oasbox-shell {
 	display: flex;
 	flex-direction: column;
 	height: 100vh;
 }
 
-.oas-toolbar {
+.oasbox-toolbar {
 	display: flex;
 	align-items: center;
 	gap: var(--size-4-2);
@@ -38,28 +39,60 @@ body {
 	font-size: var(--font-ui-small);
 }
 
-.oas-toolbar .oas-toolbar-label {
+.oasbox-toolbar a.oasbox-home {
+	text-decoration: none;
+	font-size: var(--font-ui-medium);
+	line-height: 1;
+	color: var(--text-faint);
+}
+.oasbox-toolbar a.oasbox-home:hover {
+	color: var(--text-normal);
+}
+.oasbox-toolbar .oasbox-breadcrumb {
+	font-size: var(--font-ui-small);
+	font-weight: var(--font-medium);
+	color: var(--text-normal);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 240px;
+}
+.oasbox-toolbar .oasbox-toolbar-divider {
+	flex: 1;
+}
+
+.oasbox-toolbar .oasbox-toolbar-label {
 	font-weight: var(--font-medium);
 }
 
-.oas-toolbar .oas-width-range {
+.oasbox-toolbar .oasbox-width-range {
 	flex: 0 1 220px;
 }
 
-.oas-toolbar .oas-width-readout {
+.oasbox-toolbar .oasbox-width-readout {
 	min-width: 52px;
 	font-family: var(--font-monospace);
 	color: var(--text-normal);
 }
 
-.oas-toolbar button.oas-preset {
+.oasbox-toolbar button.oasbox-preset {
 	height: var(--size-4-5);
 	padding: 0 var(--size-4-2);
 	font-size: var(--font-ui-smaller);
 }
 
+.oasbox-toolbar button.oasbox-theme-toggle {
+	margin-left: var(--size-4-1);
+	font-size: var(--font-ui-medium);
+	line-height: 1;
+	color: var(--text-faint);
+}
+.oasbox-toolbar button.oasbox-theme-toggle:hover {
+	color: var(--text-normal);
+}
+
 /* Stage: left-aligned so the edge drag handle resizes width 1:1. */
-.oas-stage {
+.oasbox-stage {
 	flex: 1;
 	display: flex;
 	justify-content: flex-start;
@@ -67,56 +100,40 @@ body {
 	background: var(--background-secondary);
 }
 
-.oas-frame.workspace-leaf {
+/* Frame: fixed-width story details panel. Panel width slider controls the canvas, not this. */
+/* Story details frame — fixed-width metadata panel, no view-header chrome. */
+.oasbox-frame {
 	position: relative;
-	flex: 0 0 auto;
+	flex: 0 0 280px;
 	height: 100%;
-	min-width: 240px;
 	display: flex;
 	flex-direction: column;
 	background: var(--background-primary);
 	border-right: 1px solid var(--background-modifier-border);
+	overflow: hidden;
 }
 
-.oas-frame .oas-view-content {
+.oasbox-frame .oasbox-view-content {
 	flex: 1;
 	min-height: 0;
 	overflow-y: auto;
-	padding: var(--size-4-3);
 }
 
-.oas-frame .view-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.oas-frame .oas-view-header-left {
-	display: flex;
-	align-items: center;
-	gap: var(--size-4-2);
-}
-
-.oas-frame .view-header .oas-theme-toggle,
-.oas-frame .view-header .oas-home {
-	font-size: var(--font-ui-medium);
-	line-height: 1;
-	text-decoration: none;
-}
-
-.oas-frame a.oas-open-link {
+.oasbox-frame a.oasbox-open-link {
 	text-decoration: none;
 	display: inline-flex;
 	align-items: center;
 }
 
-.oas-frame .setting-item-control button.oas-recheck {
+.oasbox-frame .setting-item-control button.oasbox-recheck {
 	margin-left: var(--size-4-2);
 	font-size: var(--font-ui-smaller);
 }
 
 /* Drag-to-resize handle on the pane's right edge (Obsidian-like). */
-.oas-frame .oas-resize-handle {
+/* Resize handle on the right edge of the component/view canvas. */
+.oasbox-component-canvas .oasbox-resize-handle,
+.oasbox-view-canvas .oasbox-resize-handle {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -125,15 +142,16 @@ body {
 	cursor: ew-resize;
 }
 
-.oas-frame .oas-resize-handle:hover {
+.oasbox-component-canvas .oasbox-resize-handle:hover,
+.oasbox-view-canvas .oasbox-resize-handle:hover {
 	background: var(--interactive-accent);
 	opacity: 0.5;
 }
 
-/* Component canvas — fills remaining stage width for kind: "component" stories */
-.oas-component-canvas {
-	flex: 1;
-	min-width: 0;
+/* Component canvas — width controlled by panel slider (story details frame is fixed). */
+.oasbox-component-canvas {
+	position: relative;
+	flex: 0 0 auto;
 	min-height: 0;
 	display: flex;
 	align-items: center;
@@ -143,231 +161,217 @@ body {
 	background: var(--background-secondary);
 }
 
-/* Collapsible card — Getting Started accordion and other expandable sections. */
-.oas-card {
-	border-bottom: 1px solid var(--background-modifier-border);
-	border-left: 3px solid var(--background-modifier-border-hover);
-}
-
-.oas-card.is-expanded {
-	border-left-color: var(--interactive-accent);
+/* Gallery: vertical stack of cards below the heading */
+.oasbox-gallery {
+	border-top: 1px solid var(--background-modifier-border);
 }
 
-.oas-card-header {
+/* Component viewer: sidebar (first child of the stage) + story page chrome. */
+.oasbox-shell nav.oasbox-sidebar {
+	flex: 0 0 220px;
 	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--size-4-2);
-	padding: var(--size-4-3) var(--size-4-3);
-	cursor: pointer;
-	font-size: var(--font-ui-small);
-	font-weight: var(--font-semibold);
-	color: var(--text-normal);
-	user-select: none;
-}
-
-.oas-card-header:hover {
-	background: var(--background-modifier-hover);
-}
-
-.oas-card-title {
-	flex: 1;
-	min-width: 0;
+	flex-direction: column;
 	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	background: var(--background-secondary);
+	border-right: 1px solid var(--background-modifier-border);
+	transition: flex-basis 180ms ease;
+	position: relative;
 }
-
-.oas-card-chevron {
-	flex-shrink: 0;
-	color: var(--text-faint);
-	transition: transform 0.15s;
+.oasbox-shell nav.oasbox-sidebar.is-collapsed {
+	flex-basis: 28px;
+}
+.oasbox-sidebar-toggle {
+	position: absolute;
+	top: var(--size-4-1);
+	right: var(--size-4-1);
+	z-index: 1;
 	font-size: var(--font-ui-medium);
-	line-height: 1;
+	color: var(--text-faint);
+	padding: var(--size-2-1);
 }
-
-.oas-card.is-expanded .oas-card-chevron {
-	transform: rotate(90deg);
+.oasbox-sidebar-toggle:hover {
+	color: var(--text-normal);
 }
-
-.oas-card-body {
-	display: none;
-	border-top: 1px solid var(--background-modifier-border);
+.oasbox-sidebar-content {
+	flex: 1;
+	overflow-y: auto;
+	padding: var(--size-4-3) 0;
+	opacity: 1;
+	transition: opacity 120ms ease;
+}
+.oasbox-sidebar.is-collapsed .oasbox-sidebar-content {
+	opacity: 0;
+	pointer-events: none;
 }
 
-.oas-card.is-expanded .oas-card-body {
+.oasbox-shell nav.oasbox-sidebar a.oasbox-nav-item {
 	display: block;
+	text-decoration: none;
 }
 
-.oas-card-desc {
-	margin: 0;
-	padding: var(--size-4-2) var(--size-4-3);
-	color: var(--text-muted);
+.oasbox-shell nav.oasbox-sidebar .oasbox-nav-invalid {
+	color: var(--text-error);
 	font-size: var(--font-ui-smaller);
 }
 
-.oas-card-note {
-	margin: 0;
-	padding: 0 var(--size-4-3) var(--size-4-2);
-	color: var(--text-muted);
-	font-size: var(--font-ui-smaller);
-}
+/* ── Story details panel ─────────────────────────────────────── */
 
-.oas-card-children {
+.oasbox-frame .oasbox-story {
 	display: flex;
-	align-items: baseline;
-	flex-wrap: wrap;
-	gap: var(--size-4-1);
-	padding: var(--size-4-1) var(--size-4-3);
-}
-
-.oas-card-children-label {
-	color: var(--text-faint);
-	font-size: var(--font-ui-smaller);
+	flex-direction: column;
 }
 
-.oas-card-actions {
-	padding: var(--size-4-2) var(--size-4-3);
+/* Story header: title + description */
+.oasbox-frame .oasbox-story-header {
+	padding: var(--size-4-3) var(--size-4-3) var(--size-4-2);
+	border-bottom: 1px solid var(--background-modifier-border);
 }
 
-/* Gallery: vertical stack of cards below the heading */
-.oas-gallery {
-	border-top: 1px solid var(--background-modifier-border);
+.oasbox-frame .oasbox-story-title {
+	font-size: var(--font-ui-small);
+	font-weight: var(--font-semibold);
+	color: var(--text-normal);
+	overflow-wrap: break-word;
+	word-break: break-word;
+	line-height: 1.4;
 }
 
-/* Status badges for story live/draft state */
-.oas-badge {
-	display: inline-flex;
-	align-items: center;
-	padding: 1px var(--size-4-1);
-	border-radius: var(--radius-s);
+.oasbox-frame .oasbox-story-desc {
+	margin-top: var(--size-4-1);
 	font-size: var(--font-ui-smaller);
-	font-weight: var(--font-medium);
-	vertical-align: middle;
-	margin-left: var(--size-4-1);
-}
-
-.oas-badge.is-live {
-	background: var(--background-modifier-success);
-	color: var(--text-success);
-}
-
-.oas-badge.is-draft {
-	background: var(--background-modifier-hover);
-	color: var(--text-faint);
-}
-
-/* Component viewer: sidebar (first child of the stage) + story page chrome. */
-.oas-shell nav.oas-sidebar {
-	flex: 0 0 220px;
-	overflow-y: auto;
-	padding: var(--size-4-3) 0;
-	background: var(--background-secondary);
-	border-right: 1px solid var(--background-modifier-border);
+	color: var(--text-muted);
+	overflow-wrap: break-word;
+	line-height: 1.5;
 }
 
-.oas-shell nav.oas-sidebar a.oas-nav-item {
-	display: block;
-	text-decoration: none;
+/* Labeled section: references, variants, etc. */
+.oasbox-frame .oasbox-story-section {
+	padding: var(--size-4-2) var(--size-4-3);
+	border-bottom: 1px solid var(--background-modifier-border);
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-4-1);
 }
 
-.oas-shell nav.oas-sidebar .oas-nav-invalid {
-	color: var(--text-error);
+.oasbox-frame .oasbox-section-label {
 	font-size: var(--font-ui-smaller);
+	font-weight: var(--font-semibold);
+	color: var(--text-faint);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	margin-bottom: var(--size-2-1);
 }
 
-.oas-frame .oas-story-meta {
+/* Path rows — label | truncated path | Copy button */
+.oasbox-frame .oasbox-story-path {
 	display: flex;
-	flex-direction: column;
+	align-items: center;
 	gap: var(--size-4-1);
-	margin: var(--size-4-2) 0;
+	min-width: 0;
 }
 
-.oas-frame .oas-story-path {
-	display: flex;
-	align-items: center;
-	gap: var(--size-4-2);
+.oasbox-frame .oasbox-path-label {
+	flex-shrink: 0;
 	font-size: var(--font-ui-smaller);
-	color: var(--text-muted);
+	color: var(--text-faint);
+	min-width: 52px;
 }
 
-.oas-frame .oas-story-path code {
+/* Path code truncates with ellipsis; full path shown in title tooltip. */
+.oasbox-frame .oasbox-path-code {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 	font-family: var(--font-monospace);
+	font-size: var(--font-ui-smaller);
 	color: var(--text-normal);
 }
 
-.oas-frame button.oas-copy {
-	height: var(--size-4-5);
-	padding: 0 var(--size-4-2);
+.oasbox-frame button.oasbox-copy {
+	flex-shrink: 0;
+	height: var(--size-4-4);
+	padding: 0 var(--size-4-1);
 	font-size: var(--font-ui-smaller);
 }
 
-.oas-frame .oas-variants {
+/* Variant tabs */
+.oasbox-frame .oasbox-variants {
 	display: flex;
 	flex-wrap: wrap;
 	gap: var(--size-4-1);
-	margin: var(--size-4-2) 0;
 }
 
-.oas-frame a.oas-variant {
-	padding: var(--size-4-1) var(--size-4-2);
+.oasbox-frame a.oasbox-variant {
+	padding: var(--size-2-1) var(--size-4-2);
 	border-radius: var(--radius-s);
 	background: var(--background-modifier-hover);
 	color: var(--text-normal);
 	font-size: var(--font-ui-smaller);
 	text-decoration: none;
+	overflow-wrap: anywhere;
 }
 
-.oas-frame a.oas-variant.is-active {
+.oasbox-frame a.oasbox-variant.is-active {
 	background: var(--interactive-accent);
 	color: var(--text-on-accent);
 }
 
-.oas-frame .oas-story-notes {
-	margin: var(--size-4-2) 0;
+/* Notes and children */
+.oasbox-frame .oasbox-story-notes {
+	padding: var(--size-4-2) var(--size-4-3);
 	color: var(--text-muted);
 	font-size: var(--font-ui-small);
+	overflow-wrap: break-word;
+	border-bottom: 1px solid var(--background-modifier-border);
 }
 
-.oas-frame .oas-story-children {
+.oasbox-frame .oasbox-story-children {
 	display: flex;
 	flex-wrap: wrap;
 	gap: var(--size-4-2);
-	margin: var(--size-4-2) 0;
+	padding: var(--size-4-2) var(--size-4-3);
 }
 
-.oas-frame a.oas-child {
+.oasbox-frame a.oasbox-child {
 	color: var(--text-accent);
 	font-size: var(--font-ui-small);
 	text-decoration: none;
 }
 
-.oas-frame .oas-child-missing {
+.oasbox-frame .oasbox-child-missing {
 	color: var(--text-error);
 	font-size: var(--font-ui-small);
 }
 
-.oas-frame .oas-story-canvas {
-	margin-top: var(--size-4-3);
-	padding-top: var(--size-4-3);
-	border-top: 1px solid var(--background-modifier-border);
+.oasbox-frame .oasbox-story-missing {
+	color: var(--text-error);
 }
 
-.oas-frame .oas-story-missing {
-	color: var(--text-error);
+/* kind: "view" canvas — fills remaining stage width at full height. */
+/* View canvas — width controlled by panel slider, full height. */
+.oasbox-view-canvas {
+	position: relative;
+	flex: 0 0 auto;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	overflow: hidden;
+	background: var(--background-primary);
 }
 
 /* Reference index: token rows and class previews. */
-.oas-frame input.oas-token-filter {
+.oasbox-frame input.oasbox-token-filter {
 	width: 100%;
 	margin: var(--size-4-2) 0 var(--size-4-3) 0;
 }
 
-.oas-frame .oas-token-group {
+.oasbox-frame .oasbox-token-group {
 	margin-bottom: var(--size-4-3);
 }
 
-.oas-frame .oas-token-row {
+.oasbox-frame .oasbox-token-row {
 	display: grid;
 	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 48px auto;
 	align-items: center;
@@ -377,17 +381,17 @@ body {
 	font-size: var(--font-ui-smaller);
 }
 
-.oas-frame .oas-token-name {
+.oasbox-frame .oasbox-token-name {
 	font-family: var(--font-monospace);
 	overflow-wrap: anywhere;
 }
 
-.oas-frame .oas-token-value {
+.oasbox-frame .oasbox-token-value {
 	color: var(--text-muted);
 	overflow-wrap: anywhere;
 }
 
-.oas-frame .oas-swatch {
+.oasbox-frame .oasbox-swatch {
 	width: var(--size-4-4);
 	height: var(--size-4-4);
 	border-radius: var(--radius-s);
@@ -395,7 +399,7 @@ body {
 	justify-self: start;
 }
 
-.oas-frame .oas-sizebar {
+.oasbox-frame .oasbox-sizebar {
 	height: var(--size-4-2);
 	max-width: 48px;
 	background: var(--text-accent);
@@ -403,19 +407,19 @@ body {
 	justify-self: start;
 }
 
-.oas-frame .oas-swatch-none {
+.oasbox-frame .oasbox-swatch-none {
 	width: var(--size-4-4);
 }
 
-.oas-frame .oas-class-group {
+.oasbox-frame .oasbox-class-group {
 	margin-bottom: var(--size-4-4);
 }
 
-.oas-frame .oas-class-entry {
+.oasbox-frame .oasbox-class-entry {
 	margin: var(--size-4-3) 0;
 }
 
-.oas-frame .oas-class-head {
+.oasbox-frame .oasbox-class-head {
 	display: flex;
 	align-items: center;
 	gap: var(--size-4-2);
@@ -423,7 +427,7 @@ body {
 	font-size: var(--font-ui-small);
 }
 
-.oas-frame .oas-class-when {
+.oasbox-frame .oasbox-class-when {
 	margin: var(--size-4-1) 0;
 	color: var(--text-muted);
 	font-size: var(--font-ui-smaller);
@@ -431,57 +435,15 @@ body {
 
 /* transform creates a containing block, so position:fixed descendants (e.g.
    .modal) stay inside the preview box instead of covering the viewport. */
-.oas-frame .oas-class-preview {
+.oasbox-frame .oasbox-class-preview {
 	padding: var(--size-4-3);
 	border: 1px dashed var(--background-modifier-border);
 	border-radius: var(--radius-m);
 	transform: translate(0);
 }
 
-.oas-frame .modal.oas-modal-preview {
+.oasbox-frame .modal.oasbox-modal-preview {
 	position: static;
 	width: auto;
 	max-width: 100%;
 }
-
-/* DiffViewer — CodeMirror 6 MergeView container */
-.oas-diff-viewer {
-	height: 480px;
-	overflow: hidden;
-	border: 1px solid var(--background-modifier-border);
-	border-radius: var(--radius-m);
-	font-family: var(--font-monospace);
-	font-size: var(--font-ui-small);
-}
-
-.oas-diff-viewer .cm-mergeView {
-	height: 100%;
-}
-
-.oas-diff-viewer .cm-editor {
-	height: 100%;
-	background: var(--background-primary);
-	color: var(--text-normal);
-}
-
-.oas-diff-viewer .cm-scroller {
-	overflow: auto;
-	font-family: var(--font-monospace);
-}
-
-.oas-diff-viewer .cm-mergeViewEditor {
-	border-right: 1px solid var(--background-modifier-border);
-}
-
-.oas-diff-viewer .cm-mergeViewEditor:last-child {
-	border-right: none;
-}
-
-.oas-diff-viewer .cm-deletedChunk {
-	background: color-mix(in srgb, var(--color-red) 15%, transparent);
-}
-
-.oas-diff-viewer .cm-insertedChunk,
-.oas-diff-viewer .cm-changedLine {
-	background: color-mix(in srgb, var(--color-green) 12%, transparent);
-}

package/template/tools/sandbox/shell.ts

@@ -8,8 +8,8 @@ import { Toolbar } from "./toolbar";
  * chrome — only the pane contents port into a plugin.
  */
 export const Shell = (content: ArrowExpression): ArrowTemplate => html`
-	<div class="oas-shell">
+	<div class="oasbox-shell">
 		${Toolbar()}
-		<div class="oas-stage">${content}</div>
+		<div class="oasbox-stage">${content}</div>
 	</div>
 `;