creoui 0.20.1

package/dist/shells/CreoFacetGrid.d.ts

@@ -0,0 +1,37 @@
+import { Component, JSX } from 'solid-js';
+interface CreoFacetGridProps {
+    children: JSX.Element;
+    /**
+     * Sidebar width (default 320px)。 CSS variable `--creo-facet-grid-sidebar-width` で
+     * override 可能。
+     */
+    sidebarWidth?: string;
+    /**
+     * Max width of grid (default 1100px)。 CSS variable `--creo-facet-grid-max-width` で
+     * override 可能。
+     */
+    maxWidth?: string;
+    /** Class to merge with base */
+    class?: string;
+}
+/**
+ * CreoFacetGrid — 2-col page grid primitive
+ *
+ * Layered Surface design v5.1 で確立した page grammar。 intrinsic main (1fr) +
+ * extrinsic sidebar (sidebarWidth) の 2-col grid、 920px breakpoint で 1-col 化。
+ *
+ * 子要素は consumer が intrinsic / extrinsic 配置を決める (PR-3 で `<CreoFacet>`
+ * primitive 化予定):
+ *
+ * ```tsx
+ * <CreoFacetGrid>
+ *   <article>main content</article>
+ *   <aside>sidebar content</aside>
+ * </CreoFacetGrid>
+ * ```
+ *
+ * Vision: mem_1Cak5rxTFWvLNxjSRiQ1Ak (Layered Surface v5.1)
+ * Origin: Phase 1 (CREO-160) `.memoryPage` から抽出
+ */
+export declare const CreoFacetGrid: Component<CreoFacetGridProps>;
+export {};

package/dist/shells/CreoPageShell.d.ts

@@ -0,0 +1,42 @@
+import { Component, JSX } from 'solid-js';
+interface CreoPageShellProps {
+    children: JSX.Element;
+    /**
+     * Inner container max width (default 1100px)。 CSS variable
+     * `--creo-page-shell-max-width` で override 可能。
+     */
+    maxWidth?: string;
+    /**
+     * Entrance animation (opacity + translateY) を無効化する。
+     * `prefers-reduced-motion: reduce` は CSS module 側で自動対応するので
+     * 通常は明示指定不要、 navigation snap や test 環境で off にする用途。
+     */
+    noAnimation?: boolean;
+    /** Class to merge with base (outer `<main>`) */
+    class?: string;
+}
+/**
+ * CreoPageShell — full-canvas page wrapper primitive
+ *
+ * Layered Surface design v5.1 の **page mode** primitive。 Rail / Nav の右側に
+ * 配置され、 max-width 1100px の inner container + entrance animation で
+ * page 遷移を視覚化。 子要素は consumer が `<CreoFacetGrid>` 等で組み立てる。
+ *
+ * ```tsx
+ * <div class="flex h-screen">
+ *   <Rail />
+ *   <Nav />
+ *   <CreoPageShell>
+ *     <CreoFacetGrid>
+ *       <article>main</article>
+ *       <aside>sidebar</aside>
+ *     </CreoFacetGrid>
+ *   </CreoPageShell>
+ * </div>
+ * ```
+ *
+ * Vision: mem_1Cak5rxTFWvLNxjSRiQ1Ak (Layered Surface v5.1)
+ * Origin: Phase 1 (CREO-160) `MemoryPageShell` から layout 部分を抽出
+ */
+export declare const CreoPageShell: Component<CreoPageShellProps>;
+export {};

package/dist/shells/index.css

@@ -0,0 +1 @@
+.creo-shell-CPh5B{max-width:var(--creo-facet-grid-max-width, 1100px);margin:0 auto;padding:var(--spacing-xl) var(--spacing-l);display:grid;grid-template-columns:minmax(0,1fr) var(--creo-facet-grid-sidebar-width, 320px);gap:var(--spacing-xl);align-items:start}@media (max-width: 920px){.creo-shell-CPh5B{grid-template-columns:1fr;gap:var(--spacing-l);padding:var(--spacing-m)}}.creo-shell-4bx-q{flex:1 1 0%;overflow-y:auto;min-height:0}.creo-shell-N0Xkz{max-width:var(--creo-page-shell-max-width, 1100px);margin-left:auto;margin-right:auto;padding:var(--spacing-l)}.creo-shell-2-cUr{animation:creo-shell-mb-D2 .3s ease-out both}@keyframes creo-shell-mb-D2{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.creo-shell-2-cUr{animation:none}}

package/dist/shells/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * creoui/shells — Layered Surface page grammar primitives
+ *
+ * Phase 1 (CREO-160) で creo-web 内に直書きされた layout pattern を
+ * 抽出した Solid component primitive 群。 vp-app / chronista-hub /
+ * fleetstage CP 等で再利用可能。
+ *
+ * Vision: mem_1Cak5rxTFWvLNxjSRiQ1Ak (Layered Surface v5.1)
+ * Pivot: mem_1CamfZKHbiSdMrzo4pn32T (architectural pivot 2026-05-07)
+ *
+ * 後続 PR で追加予定 (CREO-84 Phase B):
+ *  - PR-3: creo-web migration (consumer 側で <CreoFacetGrid> + <CreoPageShell> 適用)
+ *  - PR-4: <CreoFacet>       (intrinsic / extrinsic prop で main/sidebar 子配置)
+ *  - PR-5: <CreoOrientation> (Rail+Nav grammar) + <CreoPaneShell> (list + opt Sub pane)
+ */
+export { CreoFacetGrid } from './CreoFacetGrid';
+export { CreoPageShell } from './CreoPageShell';

package/dist/shells/index.js

@@ -0,0 +1,45 @@
+import { insert as d, effect as o, className as i, style as h, template as s } from "solid-js/web";
+const m = "creo-shell-CPh5B", g = {
+  creoFacetGrid: m
+};
+var P = /* @__PURE__ */ s("<div>");
+const b = (e) => (() => {
+  var a = P();
+  return d(a, () => e.children), o((l) => {
+    var t = `${g.creoFacetGrid}${e.class ? ` ${e.class}` : ""}`, r = {
+      ...e.maxWidth && {
+        "--creo-facet-grid-max-width": e.maxWidth
+      },
+      ...e.sidebarWidth && {
+        "--creo-facet-grid-sidebar-width": e.sidebarWidth
+      }
+    };
+    return t !== l.e && i(a, l.e = t), l.t = h(a, r, l.t), l;
+  }, {
+    e: void 0,
+    t: void 0
+  }), a;
+})(), $ = "creo-shell-4bx-q", S = "creo-shell-N0Xkz", x = "creo-shell-2-cUr", c = {
+  creoPageShell: $,
+  creoPageShellInner: S,
+  creoPageShellEntrance: x
+};
+var f = /* @__PURE__ */ s("<main><div>");
+const u = (e) => (() => {
+  var a = f(), l = a.firstChild;
+  return d(l, () => e.children), o((t) => {
+    var r = `${c.creoPageShell}${e.class ? ` ${e.class}` : ""}`, v = e.maxWidth ? {
+      "--creo-page-shell-max-width": e.maxWidth
+    } : void 0, n = `${c.creoPageShellInner}${e.noAnimation ? "" : ` ${c.creoPageShellEntrance}`}`;
+    return r !== t.e && i(a, t.e = r), t.t = h(a, v, t.t), n !== t.a && i(l, t.a = n), t;
+  }, {
+    e: void 0,
+    t: void 0,
+    a: void 0
+  }), a;
+})();
+export {
+  b as CreoFacetGrid,
+  u as CreoPageShell
+};
+//# sourceMappingURL=index.js.map

package/dist/shells/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/shells/CreoFacetGrid.tsx","../../src/shells/CreoPageShell.tsx"],"sourcesContent":["import type { Component, JSX } from 'solid-js'\nimport styles from './CreoFacetGrid.module.css'\n\ninterface CreoFacetGridProps {\n  children: JSX.Element\n  /**\n   * Sidebar width (default 320px)。 CSS variable `--creo-facet-grid-sidebar-width` で\n   * override 可能。\n   */\n  sidebarWidth?: string\n  /**\n   * Max width of grid (default 1100px)。 CSS variable `--creo-facet-grid-max-width` で\n   * override 可能。\n   */\n  maxWidth?: string\n  /** Class to merge with base */\n  class?: string\n}\n\n/**\n * CreoFacetGrid — 2-col page grid primitive\n *\n * Layered Surface design v5.1 で確立した page grammar。 intrinsic main (1fr) +\n * extrinsic sidebar (sidebarWidth) の 2-col grid、 920px breakpoint で 1-col 化。\n *\n * 子要素は consumer が intrinsic / extrinsic 配置を決める (PR-3 で `<CreoFacet>`\n * primitive 化予定):\n *\n * ```tsx\n * <CreoFacetGrid>\n *   <article>main content</article>\n *   <aside>sidebar content</aside>\n * </CreoFacetGrid>\n * ```\n *\n * Vision: mem_1Cak5rxTFWvLNxjSRiQ1Ak (Layered Surface v5.1)\n * Origin: Phase 1 (CREO-160) `.memoryPage` から抽出\n */\nexport const CreoFacetGrid: Component<CreoFacetGridProps> = (props) => (\n  <div\n    class={`${styles.creoFacetGrid}${props.class ? ` ${props.class}` : ''}`}\n    style={{\n      ...(props.maxWidth && { '--creo-facet-grid-max-width': props.maxWidth }),\n      ...(props.sidebarWidth && {\n        '--creo-facet-grid-sidebar-width': props.sidebarWidth,\n      }),\n    }}\n  >\n    {props.children}\n  </div>\n)\n","import type { Component, JSX } from 'solid-js'\nimport styles from './CreoPageShell.module.css'\n\ninterface CreoPageShellProps {\n  children: JSX.Element\n  /**\n   * Inner container max width (default 1100px)。 CSS variable\n   * `--creo-page-shell-max-width` で override 可能。\n   */\n  maxWidth?: string\n  /**\n   * Entrance animation (opacity + translateY) を無効化する。\n   * `prefers-reduced-motion: reduce` は CSS module 側で自動対応するので\n   * 通常は明示指定不要、 navigation snap や test 環境で off にする用途。\n   */\n  noAnimation?: boolean\n  /** Class to merge with base (outer `<main>`) */\n  class?: string\n}\n\n/**\n * CreoPageShell — full-canvas page wrapper primitive\n *\n * Layered Surface design v5.1 の **page mode** primitive。 Rail / Nav の右側に\n * 配置され、 max-width 1100px の inner container + entrance animation で\n * page 遷移を視覚化。 子要素は consumer が `<CreoFacetGrid>` 等で組み立てる。\n *\n * ```tsx\n * <div class=\"flex h-screen\">\n *   <Rail />\n *   <Nav />\n *   <CreoPageShell>\n *     <CreoFacetGrid>\n *       <article>main</article>\n *       <aside>sidebar</aside>\n *     </CreoFacetGrid>\n *   </CreoPageShell>\n * </div>\n * ```\n *\n * Vision: mem_1Cak5rxTFWvLNxjSRiQ1Ak (Layered Surface v5.1)\n * Origin: Phase 1 (CREO-160) `MemoryPageShell` から layout 部分を抽出\n */\nexport const CreoPageShell: Component<CreoPageShellProps> = (props) => (\n  <main\n    class={`${styles.creoPageShell}${props.class ? ` ${props.class}` : ''}`}\n    style={props.maxWidth ? { '--creo-page-shell-max-width': props.maxWidth } : undefined}\n  >\n    <div\n      class={`${styles.creoPageShellInner}${props.noAnimation ? '' : ` ${styles.creoPageShellEntrance}`}`}\n    >\n      {props.children}\n    </div>\n  </main>\n)\n"],"names":["CreoFacetGrid","props","_el$","_tmpl$","_$insert","children","_$effect","_p$","_v$","styles","creoFacetGrid","class","_v$2","maxWidth","sidebarWidth","e","_$className","t","_$style","undefined","CreoPageShell","_el$2","firstChild","creoPageShell","_v$3","creoPageShellInner","noAnimation","creoPageShellEntrance","a"],"mappings":";;;;;AAsCO,MAAMA,IAAgDC,QAAK,MAAA;AAAA,MAAAC,IAAAC,EAAAA;AAAAC,SAAAA,EAAAF,GAAA,MAU7DD,EAAMI,QAAQ,GAAAC,EAAAC,CAAAA,MAAA;AAAA,QAAAC,IARR,GAAGC,EAAOC,aAAa,GAAGT,EAAMU,QAAQ,IAAIV,EAAMU,KAAK,KAAK,EAAE,IAAEC,IAChE;AAAA,MACL,GAAIX,EAAMY,YAAY;AAAA,QAAE,+BAA+BZ,EAAMY;AAAAA,MAAAA;AAAAA,MAC7D,GAAIZ,EAAMa,gBAAgB;AAAA,QACxB,mCAAmCb,EAAMa;AAAAA,MAAAA;AAAAA,IAC3C;AACDN,WAAAA,MAAAD,EAAAQ,KAAAC,EAAAd,GAAAK,EAAAQ,IAAAP,CAAA,GAAAD,EAAAU,IAAAC,EAAAhB,GAAAU,GAAAL,EAAAU,CAAA,GAAAV;AAAAA,EAAA,GAAA;AAAA,IAAAQ,GAAAI;AAAAA,IAAAF,GAAAE;AAAAA,EAAAA,CAAA,GAAAjB;AAAA,GAAA;;;;;;ACHE,MAAMkB,IAAgDnB,QAAK,MAAA;AAAA,MAAAC,IAAAC,EAAAA,GAAAkB,IAAAnB,EAAAoB;AAAAlB,SAAAA,EAAAiB,GAAA,MAQ3DpB,EAAMI,QAAQ,GAAAC,EAAAC,CAAAA,MAAA;AAAA,QAAAC,IANV,GAAGC,EAAOc,aAAa,GAAGtB,EAAMU,QAAQ,IAAIV,EAAMU,KAAK,KAAK,EAAE,IAAEC,IAChEX,EAAMY,WAAW;AAAA,MAAE,+BAA+BZ,EAAMY;AAAAA,IAAAA,IAAaM,QAASK,IAG5E,GAAGf,EAAOgB,kBAAkB,GAAGxB,EAAMyB,cAAc,KAAK,IAAIjB,EAAOkB,qBAAqB,EAAE;AAAEnB,WAAAA,MAAAD,EAAAQ,KAAAC,EAAAd,GAAAK,EAAAQ,IAAAP,CAAA,GAAAD,EAAAU,IAAAC,EAAAhB,GAAAU,GAAAL,EAAAU,CAAA,GAAAO,MAAAjB,EAAAqB,KAAAZ,EAAAK,GAAAd,EAAAqB,IAAAJ,CAAA,GAAAjB;AAAAA,EAAA,GAAA;AAAA,IAAAQ,GAAAI;AAAAA,IAAAF,GAAAE;AAAAA,IAAAS,GAAAT;AAAAA,EAAAA,CAAA,GAAAjB;AAAA,GAAA;"}

package/dist/token-shim.css

@@ -0,0 +1,133 @@
+/**
+ * creoui — token-shim.css
+ *
+ * 既存プロジェクトが creoui 移行する際の **transitional alias 層**。
+ * 典型的な flat 1 階層 (`--color-primary`) / Tailwind 風 / Tabler 風の変数名を
+ * creoui の DTCG 3 階層 token へ alias する。
+ *
+ * 使い方:
+ * ```js
+ * import 'creoui/tokens.css'       // 1. SSOT token
+ * import 'creoui/token-shim.css'   // 2. transitional aliases
+ * // 3. 既存 CSS が徐々に新 token へ置換、shim は最後に削除
+ * ```
+ *
+ * 段階移行 (CREO-103 Phase 1 想定):
+ *   Phase A: tokens.css + shim.css + 既存 CSS (unchanged) — 背景/枠線/文字色は shim 経由で自動追従
+ *   Phase B: domain 単位で `bg-primary` → `bg-brand-primary` 等の class/var 置換
+ *   Phase C: shim 削除 → 完全移行完了
+ *
+ * **creoui 2 階層目以上の意味的 token** (例: `--color-text-secondary`) を
+ * `color-muted` にまとめる等、flat 構造への downgrade が主。逆向き (階層化)
+ * は consumer 側の設計判断に委ねる。
+ */
+
+:root {
+  /* ---------- Color: brand / surface / text の flat alias ---------- */
+
+  --color-primary: var(--color-brand-primary);
+  --color-primary-hover: var(--color-brand-primary-hover);
+  --color-primary-active: var(--color-brand-primary-active);
+  --color-primary-subtle: var(--color-brand-primary-subtle);
+  --color-secondary: var(--color-brand-secondary);
+  --color-accent: var(--color-brand-accent);
+
+  --color-success: var(--color-semantic-success);
+  --color-warning: var(--color-semantic-warning);
+  --color-error: var(--color-semantic-error);
+  --color-danger: var(--color-semantic-error); /* Tabler 流 */
+  --color-info: var(--color-semantic-info);
+
+  --color-bg: var(--color-surface-bg-base);
+  --color-bg-subtle: var(--color-surface-bg-subtle);
+  --color-surface: var(--color-surface-surface);
+  --color-surface-muted: var(--color-surface-bg-subtle);
+  --color-border: var(--color-surface-border);
+
+  --color-fg: var(--color-text-primary);
+  --color-text: var(--color-text-primary);
+  --color-muted: var(--color-text-secondary);
+  --color-subtle: var(--color-text-tertiary);
+
+  /* ---------- Spacing flat alias (Tailwind/Bootstrap 風の数値名) ---------- */
+
+  --space-1: var(--spacing-xs); /* 4px */
+  --space-2: var(--spacing-s); /* 8px */
+  --space-3: var(--spacing-m); /* 18px */
+  --space-4: var(--spacing-l); /* 24px */
+  --space-5: var(--spacing-xl); /* 32px */
+
+  /* ---------- 5 tier rename legacy alias (sm/md/lg → s/m/l 互換、 v0.16-v0.17 で完了) ----------
+     creoui v0.0-v0.16 は xs/sm/md/lg/xl 命名 (Tailwind 流) だったが、 v0.17 で全
+     dimension scale token が xs/s/m/l/xl の 5 tier convention に完全統一。 旧 consumer
+     (creo-memories 等) は token-shim.css 経由で互換維持。 v0.18 で component attribute
+     (data-size="md" 等) も rename されたが、 attribute は HTML markup 側で書換が必要 (CSS
+     alias で吸収不可)。 */
+
+  /* spacing (v0.16 で先行 rename) */
+  --spacing-sm: var(--spacing-s);
+  --spacing-md: var(--spacing-m);
+  --spacing-lg: var(--spacing-l);
+
+  /* margin (v0.17 で rename) */
+  --margin-sm: var(--margin-s);
+  --margin-md: var(--margin-m);
+  --margin-lg: var(--margin-l);
+
+  /* radius (v0.17 で rename) */
+  --radius-sm: var(--radius-s);
+  --radius-md: var(--radius-m);
+  --radius-lg: var(--radius-l);
+
+  /* shadow (v0.17 で rename) */
+  --shadow-sm: var(--shadow-s);
+  --shadow-md: var(--shadow-m);
+  --shadow-lg: var(--shadow-l);
+
+  /* typography.size (v0.17 で rename) */
+  --typography-size-sm: var(--typography-size-s);
+  --typography-size-md: var(--typography-size-m);
+  --typography-size-lg: var(--typography-size-l);
+
+  /* typography.display (v0.17 で rename) */
+  --typography-display-sm: var(--typography-display-s);
+  --typography-display-md: var(--typography-display-m);
+  --typography-display-lg: var(--typography-display-l);
+
+  /* Bootstrap 5 互換 alias (0.25rem 刻み近似、px 化した shim) */
+  --bs-spacer: var(--spacing-m);
+
+  /* ---------- Radius flat alias ---------- */
+
+  --border-radius: var(--radius-m);
+  --border-radius-sm: var(--radius-s);
+  --border-radius-lg: var(--radius-l);
+  --border-radius-xl: var(--radius-xl);
+  --border-radius-pill: var(--radius-full);
+  --border-radius-circle: var(--radius-full);
+
+  /* Tabler 流: --tblr-border-radius */
+  --tblr-border-radius: var(--radius-m);
+
+  /* ---------- Typography flat alias ---------- */
+
+  --font-size-base: var(--typography-size-m);
+  --font-size-sm: var(--typography-size-s);
+  --font-size-lg: var(--typography-size-l);
+  --font-size-xs: var(--typography-size-xs);
+
+  --font-family-base: var(--typography-family-sans);
+  --font-family-mono: var(--typography-family-mono);
+  --font-family-serif: var(--typography-family-sans); /* default fallback */
+
+  --font-weight-normal: var(--typography-weight-regular);
+  --font-weight-medium: var(--typography-weight-medium);
+  --font-weight-bold: var(--typography-weight-semibold);
+
+  /* ---------- Shadow ---------- */
+
+  --shadow: var(--shadow-m);
+  --box-shadow: var(--shadow-m);
+  --box-shadow-sm: var(--shadow-s);
+  --box-shadow-lg: var(--shadow-l);
+}