@elytracms/studio 0.0.1

package/dist/ui/inspector.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface InspectorSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title?: ReactNode;
+    /** Optional trailing content in the section header (e.g. an action button). */
+    action?: ReactNode;
+}
+/**
+ * Named inspector section — the building block of the property inspector (brief §8.2).
+ * Use instead of ad-hoc labelled div groups.
+ */
+export declare function InspectorSection({ title, action, className, children, ...props }: InspectorSectionProps): import("react").JSX.Element;
+export interface InspectorRowProps extends HTMLAttributes<HTMLDivElement> {
+    label: ReactNode;
+    htmlFor?: string;
+    hint?: ReactNode;
+}
+/** A label/control row inside an InspectorSection. */
+export declare function InspectorRow({ label, htmlFor, hint, className, children, ...props }: InspectorRowProps): import("react").JSX.Element;

package/dist/ui/inspector.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+/**
+ * Named inspector section — the building block of the property inspector (brief §8.2).
+ * Use instead of ad-hoc labelled div groups.
+ */
+export function InspectorSection({ title, action, className, children, ...props }) {
+    return (_jsxs("div", { className: cn('border-b border-border last:border-b-0', className), ...props, children: [title != null && (_jsxs("div", { className: "flex items-center justify-between px-3 pt-3 pb-1.5", children: [_jsx("span", { className: "text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: title }), action] })), _jsx("div", { className: "flex flex-col gap-1 px-3 pb-3 pt-1", children: children })] }));
+}
+/** A label/control row inside an InspectorSection. */
+export function InspectorRow({ label, htmlFor, hint, className, children, ...props }) {
+    return (_jsxs("div", { className: cn('grid grid-cols-[88px_1fr] items-center gap-2 py-1', className), ...props, children: [_jsx("label", { htmlFor: htmlFor, className: "truncate text-xs text-muted-foreground", title: typeof label === 'string' ? label : undefined, children: label }), _jsxs("div", { className: "min-w-0", children: [children, hint != null && _jsx("p", { className: "mt-1 text-[0.7rem] text-muted-foreground/70", children: hint })] })] }));
+}
+//# sourceMappingURL=inspector.js.map

package/dist/ui/inspector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector.js","sourceRoot":"","sources":["../../src/ui/inspector.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAA;AAQjC;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAyB;IACtG,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,KAAM,KAAK,aAC/E,KAAK,IAAI,IAAI,IAAI,CAChB,eAAK,SAAS,EAAC,oDAAoD,aACjE,eAAM,SAAS,EAAC,+EAA+E,YAC5F,KAAK,GACD,EACN,MAAM,IACH,CACP,EACD,cAAK,SAAS,EAAC,oCAAoC,YAAE,QAAQ,GAAO,IAChE,CACP,CAAA;AACH,CAAC;AAQD,sDAAsD;AACtD,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAqB;IACrG,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,mDAAmD,EAAE,SAAS,CAAC,KAAM,KAAK,aAC3F,gBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,wCAAwC,EAAC,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,YAC7H,KAAK,GACA,EACR,eAAK,SAAS,EAAC,SAAS,aACrB,QAAQ,EACR,IAAI,IAAI,IAAI,IAAI,YAAG,SAAS,EAAC,6CAA6C,YAAE,IAAI,GAAK,IAClF,IACF,CACP,CAAA;AACH,CAAC"}

package/dist/ui/layout.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes } from 'react';
+declare const GAP: {
+    readonly none: "gap-0";
+    readonly px: "gap-px";
+    readonly '1': "gap-1";
+    readonly '2': "gap-2";
+    readonly '3': "gap-3";
+    readonly '4': "gap-4";
+    readonly '6': "gap-6";
+    readonly '8': "gap-8";
+};
+declare const ALIGN: {
+    readonly start: "items-start";
+    readonly center: "items-center";
+    readonly end: "items-end";
+    readonly stretch: "items-stretch";
+    readonly baseline: "items-baseline";
+};
+declare const JUSTIFY: {
+    readonly start: "justify-start";
+    readonly center: "justify-center";
+    readonly end: "justify-end";
+    readonly between: "justify-between";
+    readonly around: "justify-around";
+};
+interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+    gap?: keyof typeof GAP;
+    align?: keyof typeof ALIGN;
+    justify?: keyof typeof JUSTIFY;
+    wrap?: boolean;
+}
+/** Vertical stack — named layout primitive instead of an anonymous flex-col div. */
+export declare function Stack({ gap, align, justify, wrap, className, ...props }: FlexProps): import("react").JSX.Element;
+/** Horizontal row — named layout primitive instead of an anonymous flex-row div. */
+export declare function Row({ gap, align, justify, wrap, className, ...props }: FlexProps): import("react").JSX.Element;
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    cols?: number;
+    gap?: keyof typeof GAP;
+    minItemWidth?: string;
+}
+/** Grid — named layout primitive. Pass `minItemWidth` for an auto-fit responsive grid. */
+export declare function Grid({ cols, gap, minItemWidth, className, style, ...props }: GridProps): import("react").JSX.Element;
+/** A flexible spacer that pushes siblings apart inside a Row/Stack. */
+export declare function Spacer({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export {};

package/dist/ui/layout.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+const GAP = {
+    none: 'gap-0',
+    px: 'gap-px',
+    '1': 'gap-1',
+    '2': 'gap-2',
+    '3': 'gap-3',
+    '4': 'gap-4',
+    '6': 'gap-6',
+    '8': 'gap-8',
+};
+const ALIGN = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline',
+};
+const JUSTIFY = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+};
+/** Vertical stack — named layout primitive instead of an anonymous flex-col div. */
+export function Stack({ gap = '3', align, justify, wrap, className, ...props }) {
+    return (_jsx("div", { className: cn('flex flex-col', GAP[gap], align && ALIGN[align], justify && JUSTIFY[justify], wrap && 'flex-wrap', className), ...props }));
+}
+/** Horizontal row — named layout primitive instead of an anonymous flex-row div. */
+export function Row({ gap = '2', align = 'center', justify, wrap, className, ...props }) {
+    return (_jsx("div", { className: cn('flex flex-row', GAP[gap], ALIGN[align], justify && JUSTIFY[justify], wrap && 'flex-wrap', className), ...props }));
+}
+/** Grid — named layout primitive. Pass `minItemWidth` for an auto-fit responsive grid. */
+export function Grid({ cols, gap = '4', minItemWidth, className, style, ...props }) {
+    const autoFit = minItemWidth
+        ? { gridTemplateColumns: `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` }
+        : cols
+            ? { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }
+            : undefined;
+    return _jsx("div", { className: cn('grid', GAP[gap], className), style: { ...autoFit, ...style }, ...props });
+}
+/** A flexible spacer that pushes siblings apart inside a Row/Stack. */
+export function Spacer({ className, ...props }) {
+    return _jsx("div", { className: cn('flex-1', className), "aria-hidden": true, ...props });
+}
+//# sourceMappingURL=layout.js.map

package/dist/ui/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/ui/layout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAA;AAEjC,MAAM,GAAG,GAAG;IACV,IAAI,EAAE,OAAO;IACb,EAAE,EAAE,QAAQ;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;CACJ,CAAA;AAEV,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,cAAc;IACtB,GAAG,EAAE,WAAW;IAChB,OAAO,EAAE,eAAe;IACxB,QAAQ,EAAE,gBAAgB;CAClB,CAAA;AAEV,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,eAAe;IACtB,MAAM,EAAE,gBAAgB;IACxB,GAAG,EAAE,aAAa;IAClB,OAAO,EAAE,iBAAiB;IAC1B,MAAM,EAAE,gBAAgB;CAChB,CAAA;AASV,oFAAoF;AACpF,MAAM,UAAU,KAAK,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa;IACvF,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,eAAe,EACf,GAAG,CAAC,GAAG,CAAC,EACR,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,EACrB,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAC3B,IAAI,IAAI,WAAW,EACnB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,oFAAoF;AACpF,MAAM,UAAU,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,KAAK,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa;IAChG,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,eAAe,EACf,GAAG,CAAC,GAAG,CAAC,EACR,KAAK,CAAC,KAAK,CAAC,EACZ,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAC3B,IAAI,IAAI,WAAW,EACnB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAQD,0FAA0F;AAC1F,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,GAAG,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAa;IAC3F,MAAM,OAAO,GAAG,YAAY;QAC1B,CAAC,CAAC,EAAE,mBAAmB,EAAE,4BAA4B,YAAY,SAAS,EAAE;QAC5E,CAAC,CAAC,IAAI;YACJ,CAAC,CAAC,EAAE,mBAAmB,EAAE,UAAU,IAAI,mBAAmB,EAAE;YAC5D,CAAC,CAAC,SAAS,CAAA;IACf,OAAO,cAAK,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,OAAO,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,GAAI,CAAA;AACxG,CAAC;AAED,uEAAuE;AACvE,MAAM,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkC;IAC5E,OAAO,cAAK,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,0BAAkB,KAAK,GAAI,CAAA;AAC3E,CAAC"}

package/dist/ui/panel.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'react';
+/**
+ * Panel — the primary surface primitive for Studio regions (sidebars, inspector,
+ * canvas chrome). Use instead of stray bordered divs.
+ */
+export declare function Panel({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export interface PanelHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    sticky?: boolean;
+}
+export declare function PanelHeader({ sticky, className, ...props }: PanelHeaderProps): import("react").JSX.Element;
+export declare function PanelBody({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function PanelFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/dist/ui/panel.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import { Row } from './layout';
+/**
+ * Panel — the primary surface primitive for Studio regions (sidebars, inspector,
+ * canvas chrome). Use instead of stray bordered divs.
+ */
+export function Panel({ className, ...props }) {
+    return (_jsx("section", { className: cn('flex flex-col overflow-hidden rounded-lg border border-border bg-panel', className), ...props }));
+}
+export function PanelHeader({ sticky, className, ...props }) {
+    return (_jsx(Row, { gap: "2", className: cn('h-11 shrink-0 px-3 hairline-b', sticky && 'sticky top-0 z-10 bg-panel/95 backdrop-blur', className), ...props }));
+}
+export function PanelBody({ className, ...props }) {
+    return _jsx("div", { className: cn('min-h-0 flex-1 overflow-auto p-3', className), ...props });
+}
+export function PanelFooter({ className, ...props }) {
+    return _jsx(Row, { gap: "2", className: cn('h-11 shrink-0 px-3 hairline-t', className), ...props });
+}
+//# sourceMappingURL=panel.js.map

package/dist/ui/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../src/ui/panel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAA;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAE9B;;;GAGG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkC;IAC3E,OAAO,CACL,kBACE,SAAS,EAAE,EAAE,CAAC,wEAAwE,EAAE,SAAS,CAAC,KAC9F,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAMD,MAAM,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB;IAC3E,OAAO,CACL,KAAC,GAAG,IACF,GAAG,EAAC,GAAG,EACP,SAAS,EAAE,EAAE,CACX,+BAA+B,EAC/B,MAAM,IAAI,6CAA6C,EACvD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkC;IAC/E,OAAO,cAAK,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAA;AACzF,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkC;IACjF,OAAO,KAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAA;AAC9F,CAAC"}

package/dist/ui/separator.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: 'horizontal' | 'vertical';
+}
+/** Named separator primitive. */
+export declare function Separator({ orientation, className, ...props }: SeparatorProps): import("react").JSX.Element;

package/dist/ui/separator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+/** Named separator primitive. */
+export function Separator({ orientation = 'horizontal', className, ...props }) {
+    return (_jsx("div", { role: "separator", "aria-orientation": orientation, className: cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px', className), ...props }));
+}
+//# sourceMappingURL=separator.js.map

package/dist/ui/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","sourceRoot":"","sources":["../../src/ui/separator.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAA;AAMjC,iCAAiC;AACjC,MAAM,UAAU,SAAS,CAAC,EAAE,WAAW,GAAG,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IAC3F,OAAO,CACL,cACE,IAAI,EAAC,WAAW,sBACE,WAAW,EAC7B,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,EAC5D,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC"}

package/dist/ui/toolbar.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+/** Named toolbar primitive — a horizontal control strip for Studio surfaces. */
+export declare function Toolbar({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+/** A logical cluster of controls within a Toolbar. */
+export declare function ToolbarGroup({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+/** Vertical divider between toolbar groups. */
+export declare function ToolbarSeparator({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/ui/toolbar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import { Separator } from './separator';
+/** Named toolbar primitive — a horizontal control strip for Studio surfaces. */
+export function Toolbar({ className, ...props }) {
+    return (_jsx("div", { role: "toolbar", className: cn('flex h-11 shrink-0 items-center gap-1 border border-border bg-panel px-2 rounded-md', className), ...props }));
+}
+/** A logical cluster of controls within a Toolbar. */
+export function ToolbarGroup({ className, ...props }) {
+    return _jsx("div", { className: cn('flex items-center gap-0.5', className), ...props });
+}
+/** Vertical divider between toolbar groups. */
+export function ToolbarSeparator({ className }) {
+    return _jsx(Separator, { orientation: "vertical", className: cn('mx-1 h-5', className) });
+}
+//# sourceMappingURL=toolbar.js.map

package/dist/ui/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../src/ui/toolbar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,gFAAgF;AAChF,MAAM,UAAU,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkC;IAC7E,OAAO,CACL,cACE,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,EAAE,CACX,qFAAqF,EACrF,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,sDAAsD;AACtD,MAAM,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkC;IAClF,OAAO,cAAK,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAA;AAClF,CAAC;AAED,+CAA+C;AAC/C,MAAM,UAAU,gBAAgB,CAAC,EAAE,SAAS,EAA0B;IACpE,OAAO,KAAC,SAAS,IAAC,WAAW,EAAC,UAAU,EAAC,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,GAAI,CAAA;AACnF,CAAC"}

package/dist/ui/typography.d.ts

@@ -0,0 +1,50 @@
+import type { HTMLAttributes } from 'react';
+declare const HEADING_SIZE: {
+    readonly display: "text-3xl md:text-4xl font-semibold tracking-tight";
+    readonly h1: "text-2xl font-semibold tracking-tight";
+    readonly h2: "text-xl font-semibold tracking-tight";
+    readonly h3: "text-base font-semibold tracking-tight";
+    readonly h4: "text-sm font-semibold tracking-tight";
+    readonly eyebrow: "text-[0.7rem] font-semibold uppercase tracking-[0.14em] text-muted-foreground";
+};
+type HeadingSize = keyof typeof HEADING_SIZE;
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: HeadingSize;
+}
+/** Named heading primitive — use instead of raw h1/h2/h3 (see AGENTS.md). */
+export declare function Heading({ level, size, className, ...props }: HeadingProps): import("react").JSX.Element;
+declare const TEXT_SIZE: {
+    readonly xs: "text-xs";
+    readonly sm: "text-sm";
+    readonly base: "text-sm md:text-[0.95rem]";
+    readonly lg: "text-base";
+};
+declare const TEXT_TONE: {
+    readonly default: "text-foreground";
+    readonly muted: "text-muted-foreground";
+    readonly subtle: "text-muted-foreground/70";
+};
+declare const TEXT_WEIGHT: {
+    readonly normal: "font-normal";
+    readonly medium: "font-medium";
+    readonly semibold: "font-semibold";
+};
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    as?: 'p' | 'span' | 'div';
+    size?: keyof typeof TEXT_SIZE;
+    tone?: keyof typeof TEXT_TONE;
+    weight?: keyof typeof TEXT_WEIGHT;
+    mono?: boolean;
+}
+/** Named text primitive — use instead of anonymous text markup. */
+export declare function Text({ as: Tag, size, tone, weight, mono, className, ...props }: TextProps): import("react").JSX.Element;
+export interface CodeProps extends HTMLAttributes<HTMLElement> {
+    tone?: 'default' | 'primary' | 'muted';
+}
+/**
+ * The signature primitive: an inline monospace chip for technical tokens —
+ * component ids, path tokens, issue codes. Reinforces the code-first identity.
+ */
+export declare function Code({ tone, className, ...props }: CodeProps): import("react").JSX.Element;
+export {};

package/dist/ui/typography.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+const HEADING_SIZE = {
+    display: 'text-3xl md:text-4xl font-semibold tracking-tight',
+    h1: 'text-2xl font-semibold tracking-tight',
+    h2: 'text-xl font-semibold tracking-tight',
+    h3: 'text-base font-semibold tracking-tight',
+    h4: 'text-sm font-semibold tracking-tight',
+    eyebrow: 'text-[0.7rem] font-semibold uppercase tracking-[0.14em] text-muted-foreground',
+};
+const DEFAULT_SIZE_FOR_LEVEL = {
+    1: 'h1',
+    2: 'h2',
+    3: 'h3',
+    4: 'h4',
+    5: 'h4',
+    6: 'h4',
+};
+/** Named heading primitive — use instead of raw h1/h2/h3 (see AGENTS.md). */
+export function Heading({ level = 2, size, className, ...props }) {
+    const Tag = `h${level}`;
+    const resolved = size ?? DEFAULT_SIZE_FOR_LEVEL[level] ?? 'h2';
+    return _jsx(Tag, { className: cn('text-foreground', HEADING_SIZE[resolved], className), ...props });
+}
+const TEXT_SIZE = { xs: 'text-xs', sm: 'text-sm', base: 'text-sm md:text-[0.95rem]', lg: 'text-base' };
+const TEXT_TONE = {
+    default: 'text-foreground',
+    muted: 'text-muted-foreground',
+    subtle: 'text-muted-foreground/70',
+};
+const TEXT_WEIGHT = { normal: 'font-normal', medium: 'font-medium', semibold: 'font-semibold' };
+/** Named text primitive — use instead of anonymous text markup. */
+export function Text({ as: Tag = 'p', size = 'sm', tone = 'default', weight = 'normal', mono = false, className, ...props }) {
+    return (_jsx(Tag, { className: cn(TEXT_SIZE[size], TEXT_TONE[tone], TEXT_WEIGHT[weight], mono && 'font-mono', 'leading-relaxed', className), ...props }));
+}
+/**
+ * The signature primitive: an inline monospace chip for technical tokens —
+ * component ids, path tokens, issue codes. Reinforces the code-first identity.
+ */
+export function Code({ tone = 'default', className, ...props }) {
+    return (_jsx("code", { className: cn('inline-flex items-center rounded-sm border px-1.5 py-0.5 font-mono text-[0.8em] leading-none', tone === 'default' && 'border-border bg-muted text-foreground/90', tone === 'primary' && 'border-primary/30 bg-primary/10 text-primary', tone === 'muted' && 'border-transparent bg-muted/60 text-muted-foreground', className), ...props }));
+}
+//# sourceMappingURL=typography.js.map

package/dist/ui/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/ui/typography.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAA;AAEjC,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,mDAAmD;IAC5D,EAAE,EAAE,uCAAuC;IAC3C,EAAE,EAAE,sCAAsC;IAC1C,EAAE,EAAE,wCAAwC;IAC5C,EAAE,EAAE,sCAAsC;IAC1C,OAAO,EAAE,+EAA+E;CAChF,CAAA;AASV,MAAM,sBAAsB,GAAgC;IAC1D,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;CACR,CAAA;AAED,6EAA6E;AAC7E,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgB;IAC5E,MAAM,GAAG,GAAG,IAAI,KAAK,EAAU,CAAA;IAC/B,MAAM,QAAQ,GAAG,IAAI,IAAI,sBAAsB,CAAC,KAAK,CAAC,IAAI,IAAI,CAAA;IAC9D,OAAO,KAAC,GAAG,IAAC,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAA;AAChG,CAAC;AAED,MAAM,SAAS,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,2BAA2B,EAAE,EAAE,EAAE,WAAW,EAAW,CAAA;AAC/G,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,iBAAiB;IAC1B,KAAK,EAAE,uBAAuB;IAC9B,MAAM,EAAE,0BAA0B;CAC1B,CAAA;AACV,MAAM,WAAW,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAW,CAAA;AAUxG,mEAAmE;AACnE,MAAM,UAAU,IAAI,CAAC,EACnB,EAAE,EAAE,GAAG,GAAG,GAAG,EACb,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,QAAQ,EACjB,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,GAAG,KAAK,EACE;IACV,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,EAAE,CACX,SAAS,CAAC,IAAI,CAAC,EACf,SAAS,CAAC,IAAI,CAAC,EACf,WAAW,CAAC,MAAM,CAAC,EACnB,IAAI,IAAI,WAAW,EACnB,iBAAiB,EACjB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAMD;;;GAGG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAa;IACvE,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,8FAA8F,EAC9F,IAAI,KAAK,SAAS,IAAI,2CAA2C,EACjE,IAAI,KAAK,SAAS,IAAI,8CAA8C,EACpE,IAAI,KAAK,OAAO,IAAI,sDAAsD,EAC1E,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC"}

package/package.json

@@ -0,0 +1,149 @@
+{
+  "name": "@elytracms/studio",
+  "author": "finaldream <hi@finaldream.de>",
+  "version": "0.0.1",
+  "private": false,
+  "description": "The Elytra studio engine (UI + lib + routes + data-only Convex schema) as an importable package. Extraction staged in EXTRACTION.md (EC-223); Stages 1-2 = UI primitives + router-free lib leaves.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "./styles.css": "./src/styles/studio.css",
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "default": "./dist/ui/index.js"
+    },
+    "./router": {
+      "types": "./dist/router/index.d.ts",
+      "default": "./dist/router/index.js"
+    },
+    "./router/*": {
+      "types": "./dist/router/*.d.ts",
+      "default": "./dist/router/*.js"
+    },
+    "./components/builder/canvas-stylesheet": {
+      "types": "./dist/components/builder/canvas-stylesheet.d.ts",
+      "default": "./dist/components/builder/canvas-stylesheet.js"
+    },
+    "./components/sections": {
+      "types": "./dist/components/sections.d.ts",
+      "default": "./dist/components/sections.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "default": "./dist/components/*.js"
+    },
+    "./lib/assets": {
+      "types": "./dist/lib/assets/index.d.ts",
+      "default": "./dist/lib/assets/index.js"
+    },
+    "./lib/clipboard": {
+      "types": "./dist/lib/clipboard/index.d.ts",
+      "default": "./dist/lib/clipboard/index.js"
+    },
+    "./lib/routing": {
+      "types": "./dist/lib/routing/index.d.ts",
+      "default": "./dist/lib/routing/index.js"
+    },
+    "./lib/workspace": {
+      "types": "./dist/lib/workspace/index.d.ts",
+      "default": "./dist/lib/workspace/index.js"
+    },
+    "./lib/registry": {
+      "types": "./dist/lib/registry/index.d.ts",
+      "default": "./dist/lib/registry/index.js"
+    },
+    "./lib/webhooks": {
+      "types": "./dist/lib/webhooks/index.d.ts",
+      "default": "./dist/lib/webhooks/index.js"
+    },
+    "./lib/persistence": {
+      "types": "./dist/lib/persistence/index.d.ts",
+      "default": "./dist/lib/persistence/index.js"
+    },
+    "./lib/operations": {
+      "types": "./dist/lib/operations/index.d.ts",
+      "default": "./dist/lib/operations/index.js"
+    },
+    "./lib/cms-views": {
+      "types": "./dist/lib/cms-views/index.d.ts",
+      "default": "./dist/lib/cms-views/index.js"
+    },
+    "./lib/references": {
+      "types": "./dist/lib/references/index.d.ts",
+      "default": "./dist/lib/references/index.js"
+    },
+    "./lib/data": {
+      "types": "./dist/lib/data/index.d.ts",
+      "default": "./dist/lib/data/index.js"
+    },
+    "./lib/locale": {
+      "types": "./dist/lib/locale/index.d.ts",
+      "default": "./dist/lib/locale/index.js"
+    },
+    "./lib/auth": {
+      "types": "./dist/lib/auth/index.d.ts",
+      "default": "./dist/lib/auth/index.js"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.ts",
+      "default": "./dist/lib/*.js"
+    },
+    "./convex/*": "./convex/*.ts"
+  },
+  "files": [
+    "dist",
+    "convex",
+    "src/styles"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@auth/core": "^0.37.4",
+    "@convex-dev/auth": "^0.0.94",
+    "@fontsource-variable/hanken-grotesk": "^5.2.8",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@radix-ui/react-dialog": "^1.1.16",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-slot": "^1.2.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "convex": "^1.40.0",
+    "lucide-react": "^1.17.0",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.0.0",
+    "@elytracms/clipboard": "0.0.1",
+    "@elytracms/collaboration": "0.0.1",
+    "@elytracms/component-registry": "0.0.1",
+    "@elytracms/cms-core": "0.0.1",
+    "@elytracms/data-binding": "0.0.1",
+    "@elytracms/content": "0.0.1",
+    "@elytracms/operations": "0.0.1",
+    "@elytracms/rich-text": "0.0.1",
+    "@elytracms/project-graph": "0.0.1",
+    "@elytracms/runtime-renderer": "0.0.1",
+    "@elytracms/starter-kits": "0.0.1",
+    "@elytracms/plugins": "0.0.1",
+    "@elytracms/studio-core": "0.0.1",
+    "@elytracms/persistence": "0.0.1"
+  },
+  "peerDependencies": {
+    "@tanstack/react-router": "^1.170.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-router": "^1.170.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit && tsc -p convex/tsconfig.json --noEmit",
+    "lint": "eslint src"
+  }
+}

package/src/styles/studio.css

@@ -0,0 +1,101 @@
+@import 'tailwindcss';
+/*
+ * EC-223 Stage 6: the studio ships its OWN stylesheet — a consumer imports this one
+ * file (`@elytracms/studio/styles.css`) and gets the whole design system. The studio's
+ * components resolve through a node_modules symlink, which Tailwind v4 auto-detection
+ * skips, so scan the package source explicitly (relative to this file) or its utility
+ * classes get purged. The consuming app's own files are auto-detected by Tailwind (the
+ * build root), so they need no entry here.
+ */
+@source '../**/*.{ts,tsx}';
+@import '@fontsource-variable/hanken-grotesk';
+@import '@fontsource-variable/jetbrains-mono';
+/*
+ * Design-token CSS variables (`:root` + `.dark`) are GENERATED from the canonical
+ * @elytracms/design-tokens package. Edit tokens there and run `pnpm gen:tokens`.
+ * Cool-slate neutrals + a confident cobalt accent; monospace carries every technical
+ * token (component ids, path tokens, issue codes) to reinforce the code-first identity.
+ */
+@import './tokens.css';
+
+/* Dark mode driven by a `.dark` class on <html>. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-panel: var(--panel);
+  --color-panel-foreground: var(--panel-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
+  --font-sans: 'Hanken Grotesk Variable', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', monospace;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+  html {
+    font-family: var(--font-sans);
+    -webkit-text-size-adjust: 100%;
+    font-feature-settings: 'cv01', 'cv03', 'ss01';
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    margin: 0;
+  }
+  ::selection {
+    background-color: color-mix(in oklch, var(--color-primary) 28%, transparent);
+  }
+  /* Refined focus rings everywhere. */
+  :focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+}
+
+/* The canvas dot-grid — the signature backdrop for editing surfaces. */
+@utility canvas-grid {
+  background-image: radial-gradient(var(--grid-line) 1px, transparent 1px);
+  background-size: 16px 16px;
+  background-position: -1px -1px;
+}
+
+/* Subtle hairline emphasis used by panels/toolbars. */
+@utility hairline-b {
+  box-shadow: inset 0 -1px 0 0 var(--color-border);
+}
+@utility hairline-t {
+  box-shadow: inset 0 1px 0 0 var(--color-border);
+}

package/src/styles/tokens.css

@@ -0,0 +1,63 @@
+/* GENERATED from @elytracms/design-tokens — do not edit by hand. Run `pnpm gen:tokens`. */
+:root {
+  --background: oklch(0.985 0.002 250);
+  --foreground: oklch(0.21 0.02 264);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--foreground);
+  --panel: oklch(0.974 0.003 255);
+  --panel-foreground: var(--foreground);
+  --popover: oklch(1 0 0);
+  --popover-foreground: var(--foreground);
+  --muted: oklch(0.955 0.004 255);
+  --muted-foreground: oklch(0.5 0.018 260);
+  --border: oklch(0.908 0.005 260);
+  --input: oklch(0.908 0.005 260);
+  --ring: oklch(0.55 0.17 256);
+  --primary: oklch(0.55 0.17 256);
+  --primary-foreground: oklch(0.99 0.005 250);
+  --secondary: oklch(0.955 0.004 255);
+  --secondary-foreground: oklch(0.3 0.02 264);
+  --accent: oklch(0.95 0.022 256);
+  --accent-foreground: oklch(0.36 0.07 256);
+  --success: oklch(0.58 0.13 150);
+  --success-foreground: oklch(0.99 0.01 150);
+  --warning: oklch(0.68 0.14 70);
+  --warning-foreground: oklch(0.24 0.04 70);
+  --destructive: oklch(0.57 0.2 27);
+  --destructive-foreground: oklch(0.99 0.01 27);
+  --info: oklch(0.56 0.12 248);
+  --info-foreground: oklch(0.99 0.01 248);
+  --grid-line: oklch(0.8 0.01 260 / 0.5);
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: oklch(0.176 0.012 264);
+  --foreground: oklch(0.95 0.005 250);
+  --card: oklch(0.205 0.013 264);
+  --card-foreground: var(--foreground);
+  --panel: oklch(0.196 0.013 264);
+  --panel-foreground: var(--foreground);
+  --popover: oklch(0.214 0.013 264);
+  --popover-foreground: var(--foreground);
+  --muted: oklch(0.256 0.013 264);
+  --muted-foreground: oklch(0.66 0.02 258);
+  --border: oklch(0.278 0.013 264);
+  --input: oklch(0.3 0.013 264);
+  --ring: oklch(0.66 0.16 256);
+  --primary: oklch(0.66 0.16 256);
+  --primary-foreground: oklch(0.16 0.02 264);
+  --secondary: oklch(0.256 0.013 264);
+  --secondary-foreground: oklch(0.92 0.005 250);
+  --accent: oklch(0.288 0.03 256);
+  --accent-foreground: oklch(0.88 0.03 256);
+  --success: oklch(0.7 0.14 150);
+  --success-foreground: oklch(0.16 0.03 150);
+  --warning: oklch(0.79 0.14 75);
+  --warning-foreground: oklch(0.2 0.04 75);
+  --destructive: oklch(0.67 0.18 25);
+  --destructive-foreground: oklch(0.16 0.03 25);
+  --info: oklch(0.7 0.13 245);
+  --info-foreground: oklch(0.16 0.03 245);
+  --grid-line: oklch(0.5 0.012 264 / 0.32);
+}