@godxjp/ui 31.8.0 → 31.9.0

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 31.8.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 31.9.0.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.

package/agent/components/SplitPane.json

@@ -32,6 +32,12 @@
       "description": "Take the remaining height of the parent instead of growing with the content. Default false keeps the pane content-height, which is right inside a scrolling page. Set it for an app-shell surface whose columns own their own scrolling — a chat transcript with a pinned composer, a full-height table beside a detail rail: the pane and both columns get a DEFINITE height, so overflow inside a column scrolls that column instead of pushing the page taller. The parent still decides how much height there is to fill: inside a flex column, give the wrapper `flex: 1; min-height: 0`.",
       "name": "fill",
       "type": "boolean"
+    },
+    {
+      "defaultValue": "\"main-first\"",
+      "description": "Which pane comes first when the pane is too narrow to split and the columns stack. `aside-first` puts the aside on top — a detail page whose properties card must not fall below a long comment thread on a phone. It moves the `<aside>` first in the DOM (not a CSS `order` swap), so in the stacked layout reading and Tab order match the screen (WCAG 1.3.2 / 2.4.3); once the pane splits, grid placement keeps main in the leading column and the aside inline-end, geometry identical to the default. No antd equivalent (antd's closest tool is Grid `Col order`, a visual-only reorder).",
+      "name": "stackOrder",
+      "type": "\"main-first\" | \"aside-first\""
     }
   ],
   "related": [
@@ -48,11 +54,12 @@
   "usage": [
     "DO: pass all right-panel content via the `aside` prop — it renders inside a semantic `<aside>` element at a fixed rem width (sm=20rem, md=22rem). The `children` prop fills the main `1fr` column. Both accept any ReactNode.",
     "DO: reach for `fill` when the pane is an app-shell surface rather than a block in a scrolling page — a chat transcript whose composer stays pinned to the bottom, a full-height table beside a detail rail. It is the supported way to say \"be as tall as what is left\"; a consumer that instead styles the pane's wrapper divs from outside (`[&>*]`, `[&>*>*]`) is targeting this component's internal DOM by position and will break the day another wrapper appears.",
+    "DO: set `stackOrder=\"aside-first\"` when the aside is what a phone user needs first — an issue's properties / agent card above its comment thread. DON'T render the aside twice (once above, once beside) or reorder with a CSS `order` override: the prop already puts it first in the DOM, so focus order follows the stacked screen, and restores the side-by-side placement once the pane splits.",
     "DO: choose `asideWidth=\"sm\"` for compact detail panels (filters, quick stats, key-value summaries) and the default `asideWidth=\"md\"` for richer panels (forms, timelines, long metadata lists).",
     "DO: wrap SplitPane inside `PageContainer` or `PageContainer.Inset` — SplitPane provides no page padding of its own. It is a grid primitive, not a page scaffold.",
     "DO: close a collapsible rail with `aside={null}` — a Slack-style thread, a Linear-style detail panel — rather than swapping `<SplitPane aside={<Thread />}>{page}</SplitPane>` for a bare `{page}`. Both look the same on screen; only the prop keeps `children` mounted. The conditional swap changes the DEPTH of `{page}` in the React tree, so React remounts it: measured in a consumer as a message list jumping from scrollTop 400 to the bottom the instant a thread opened, losing the reader's place and any component state below it.",
     "DON'T: leave `SplitPane` mounted with an empty `aside={<div />}` to avoid that remount — an empty aside still reserves its rail, leaving a blank 20-30rem column. `aside={null}` removes the element AND the column (the pane sets `data-aside=\"closed\"` on itself, so the collapse is one CSS rule, not a call-site width override).",
-    "DON'T: expect two columns below 48rem OF THE PANE'S OWN WIDTH (64rem for `asideWidth=\"lg\"`). The split is a CSS container query on the pane, not a viewport media query, so a narrow embedded pane on a large screen correctly stays single-column and a wide pane on a small screen still splits. Below the threshold it stacks (main on top, aside below); for layouts that must stay side-by-side at any width use CSS Grid or `ResponsiveGrid`.",
+    "DON'T: expect two columns below 48rem OF THE PANE'S OWN WIDTH (64rem for `asideWidth=\"lg\"`). The split is a CSS container query on the pane, not a viewport media query, so a narrow embedded pane on a large screen correctly stays single-column and a wide pane on a small screen still splits. Below the threshold it stacks (main on top, aside below — `stackOrder=\"aside-first\"` flips that); for layouts that must stay side-by-side at any width use CSS Grid or `ResponsiveGrid`.",
     "DON'T: add a CSS `overflow: hidden` or fixed height on the SplitPane wrapper; both columns carry `min-width: 0` to handle overflow correctly, and the grid uses `minmax(0, 1fr)` — adding external constraints will break the overflow contract.",
     "DON'T: hand-roll a two-column div layout with flexbox or CSS Grid when SplitPane already ships — that duplicates the responsive breakpoint logic and the semantic `<aside>` element."
   ],

package/agent/components.json

@@ -2070,6 +2070,12 @@
         "description": "Take the remaining height of the parent instead of growing with the content. Default false keeps the pane content-height, which is right inside a scrolling page. Set it for an app-shell surface whose columns own their own scrolling — a chat transcript with a pinned composer, a full-height table beside a detail rail: the pane and both columns get a DEFINITE height, so overflow inside a column scrolls that column instead of pushing the page taller. The parent still decides how much height there is to fill: inside a flex column, give the wrapper `flex: 1; min-height: 0`.",
         "name": "fill",
         "type": "boolean"
+      },
+      {
+        "defaultValue": "\"main-first\"",
+        "description": "Which pane comes first when the pane is too narrow to split and the columns stack. `aside-first` puts the aside on top — a detail page whose properties card must not fall below a long comment thread on a phone. It moves the `<aside>` first in the DOM (not a CSS `order` swap), so in the stacked layout reading and Tab order match the screen (WCAG 1.3.2 / 2.4.3); once the pane splits, grid placement keeps main in the leading column and the aside inline-end, geometry identical to the default. No antd equivalent (antd's closest tool is Grid `Col order`, a visual-only reorder).",
+        "name": "stackOrder",
+        "type": "\"main-first\" | \"aside-first\""
       }
     ],
     "related": [
@@ -2086,11 +2092,12 @@
     "usage": [
       "DO: pass all right-panel content via the `aside` prop — it renders inside a semantic `<aside>` element at a fixed rem width (sm=20rem, md=22rem). The `children` prop fills the main `1fr` column. Both accept any ReactNode.",
       "DO: reach for `fill` when the pane is an app-shell surface rather than a block in a scrolling page — a chat transcript whose composer stays pinned to the bottom, a full-height table beside a detail rail. It is the supported way to say \"be as tall as what is left\"; a consumer that instead styles the pane's wrapper divs from outside (`[&>*]`, `[&>*>*]`) is targeting this component's internal DOM by position and will break the day another wrapper appears.",
+      "DO: set `stackOrder=\"aside-first\"` when the aside is what a phone user needs first — an issue's properties / agent card above its comment thread. DON'T render the aside twice (once above, once beside) or reorder with a CSS `order` override: the prop already puts it first in the DOM, so focus order follows the stacked screen, and restores the side-by-side placement once the pane splits.",
       "DO: choose `asideWidth=\"sm\"` for compact detail panels (filters, quick stats, key-value summaries) and the default `asideWidth=\"md\"` for richer panels (forms, timelines, long metadata lists).",
       "DO: wrap SplitPane inside `PageContainer` or `PageContainer.Inset` — SplitPane provides no page padding of its own. It is a grid primitive, not a page scaffold.",
       "DO: close a collapsible rail with `aside={null}` — a Slack-style thread, a Linear-style detail panel — rather than swapping `<SplitPane aside={<Thread />}>{page}</SplitPane>` for a bare `{page}`. Both look the same on screen; only the prop keeps `children` mounted. The conditional swap changes the DEPTH of `{page}` in the React tree, so React remounts it: measured in a consumer as a message list jumping from scrollTop 400 to the bottom the instant a thread opened, losing the reader's place and any component state below it.",
       "DON'T: leave `SplitPane` mounted with an empty `aside={<div />}` to avoid that remount — an empty aside still reserves its rail, leaving a blank 20-30rem column. `aside={null}` removes the element AND the column (the pane sets `data-aside=\"closed\"` on itself, so the collapse is one CSS rule, not a call-site width override).",
-      "DON'T: expect two columns below 48rem OF THE PANE'S OWN WIDTH (64rem for `asideWidth=\"lg\"`). The split is a CSS container query on the pane, not a viewport media query, so a narrow embedded pane on a large screen correctly stays single-column and a wide pane on a small screen still splits. Below the threshold it stacks (main on top, aside below); for layouts that must stay side-by-side at any width use CSS Grid or `ResponsiveGrid`.",
+      "DON'T: expect two columns below 48rem OF THE PANE'S OWN WIDTH (64rem for `asideWidth=\"lg\"`). The split is a CSS container query on the pane, not a viewport media query, so a narrow embedded pane on a large screen correctly stays single-column and a wide pane on a small screen still splits. Below the threshold it stacks (main on top, aside below — `stackOrder=\"aside-first\"` flips that); for layouts that must stay side-by-side at any width use CSS Grid or `ResponsiveGrid`.",
       "DON'T: add a CSS `overflow: hidden` or fixed height on the SplitPane wrapper; both columns carry `min-width: 0` to handle overflow correctly, and the grid uses `minmax(0, 1fr)` — adding external constraints will break the overflow contract.",
       "DON'T: hand-roll a two-column div layout with flexbox or CSS Grid when SplitPane already ships — that duplicates the responsive breakpoint logic and the semantic `<aside>` element."
     ],

package/agent/index.json

@@ -48,7 +48,7 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.8.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.9.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
@@ -62,5 +62,5 @@
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "31.8.0"
+  "version": "31.9.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
 > A Japanese-enterprise React design system: 177 components, 2104 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.8.0.
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.9.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@31.8.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@31.9.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v31.8.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v31.9.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/dist/components/layout/split-pane.d.ts

@@ -28,5 +28,20 @@ export type SplitPaneProps = {
      * not invent it. Inside a flex column give the wrapper `flex: 1; min-height: 0`.
      */
     fill?: boolean;
+    /**
+     * Which pane comes first when the pane is too narrow to split and the columns STACK.
+     *
+     * `main-first` (default) keeps today's order: main on top, aside below. `aside-first` puts the
+     * aside on top — for a detail page whose properties / agent card must not fall below a long
+     * comment thread on a phone.
+     *
+     * `aside-first` moves the `<aside>` FIRST IN THE DOM, not just visually, so in the stacked
+     * layout the reading and focus order match what is on screen (WCAG 1.3.2 / 2.4.3 — a CSS
+     * `order` swap would leave Tab going through the whole main column before reaching the aside
+     * drawn above it). Once the pane is wide enough to split, grid placement puts main back in the
+     * leading column and the aside in the trailing one (inline-end, so it flips under RTL); there
+     * the DOM order is aside → main, which reads as two independent regions, not a broken sequence.
+     */
+    stackOrder?: "main-first" | "aside-first";
 };
-export declare function SplitPane({ children, aside, asideWidth, asideLabel, fill, }: SplitPaneProps): import("react").JSX.Element;
+export declare function SplitPane({ children, aside, asideWidth, asideLabel, fill, stackOrder, }: SplitPaneProps): import("react").JSX.Element;

package/dist/components/layout/split-pane.js

@@ -4,9 +4,12 @@ function SplitPane({
   aside,
   asideWidth = "md",
   asideLabel,
-  fill = false
+  fill = false,
+  stackOrder = "main-first"
 }) {
   const closed = aside === null || aside === void 0;
+  const asideFirst = stackOrder === "aside-first";
+  const asideElement = closed ? null : /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside });
   return (
     // `data-fill` is published on BOTH wrappers, not just the grid: the scope element is the one
     // the consumer's own box actually contains, so without it the height stops at the scope and
@@ -19,9 +22,11 @@ function SplitPane({
         "data-aside-width": asideWidth,
         "data-aside": closed ? "closed" : void 0,
         "data-fill": fill ? "true" : void 0,
+        "data-stack-order": asideFirst ? "aside-first" : void 0,
         children: [
+          asideFirst ? asideElement : null,
           /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
-          closed ? null : /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside })
+          asideFirst ? null : asideElement
         ]
       }
     ) })

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "31.8.0",
+  "version": "31.9.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.8.0",
+  "version": "31.9.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/layout.css

@@ -608,6 +608,10 @@
     min-block-size: 0;
   }
 
+  .ui-split-pane[data-fill="true"][data-stack-order="aside-first"]:not([data-aside="closed"]) {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
   .ui-resizable-panel-group {
     display: flex;
     min-height: 0;
@@ -662,12 +666,53 @@
     .ui-split-pane[data-aside-width="md"] {
       grid-template-columns: minmax(0, 1fr) 22rem;
     }
+
+    .ui-split-pane[data-stack-order="aside-first"]:is(
+        [data-aside-width="sm"],
+        [data-aside-width="md"]
+      )
+      > .ui-split-pane-main {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-stack-order="aside-first"]:is(
+        [data-aside-width="sm"],
+        [data-aside-width="md"]
+      )
+      > .ui-split-pane-aside {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-fill="true"][data-stack-order="aside-first"]:is(
+        [data-aside-width="sm"],
+        [data-aside-width="md"]
+      ):not([data-aside="closed"]) {
+      grid-template-rows: minmax(0, 1fr);
+    }
   }
 
   @container split-pane (min-width: 64rem) {
     .ui-split-pane[data-aside-width="lg"] {
       grid-template-columns: minmax(0, 1fr) 30rem;
     }
+
+    .ui-split-pane[data-stack-order="aside-first"][data-aside-width="lg"] > .ui-split-pane-main {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-stack-order="aside-first"][data-aside-width="lg"] > .ui-split-pane-aside {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-fill="true"][data-stack-order="aside-first"][data-aside-width="lg"]:not(
+        [data-aside="closed"]
+      ) {
+      grid-template-rows: minmax(0, 1fr);
+    }
   }
 
   .ui-split-pane-main,

package/docs/i18n/messages/en.json

@@ -561,6 +561,16 @@
       "presetsOnlyDescription": "panelRender returns only Presets — people pick from the palette and cannot type an arbitrary hex.",
       "tagColorLabel": "Tag colour",
       "tagColorHelper": "Arrow keys move between swatches; the selected one is announced."
+    },
+    "splitPaneStackOrder": {
+      "title": "stackOrder — the aside first when the panes stack",
+      "lead": "stackOrder=\"aside-first\" puts the aside above main once the pane is too narrow to split, and first in the DOM, so Tab reaches it first too. Wide enough to split, it sits in the trailing column exactly as it does by default. The embed below is narrower than the split width, so the properties card sits above the thread.",
+      "propertiesTitle": "Properties",
+      "status": "Status",
+      "statusValue": "In progress",
+      "assignee": "Assignee",
+      "threadTitle": "Comments",
+      "threadLead": "Long threads no longer push the properties below the fold on a phone."
     }
   },
   "serviceLauncherShowcase": {

package/docs/i18n/messages/ja.json

@@ -555,6 +555,16 @@
       "presetsOnlyDescription": "panelRender で Presets だけを返すと、パレットからの選択のみになり任意の HEX は入力できない。",
       "tagColorLabel": "タグの色",
       "tagColorHelper": "矢印キーでスウォッチ間を移動し、選択中の色が読み上げられる。"
+    },
+    "splitPaneStackOrder": {
+      "title": "stackOrder — 縦積み時にサイドを先頭へ",
+      "lead": "stackOrder=\"aside-first\" は、分割できない幅になったときにサイドをメインの上に置き、DOM でも先頭にするため Tab でも先に届きます。分割できる幅では既定と同じく後方の列に並びます。下の埋め込みは分割幅より狭いため、プロパティがスレッドの上に来ます。",
+      "propertiesTitle": "プロパティ",
+      "status": "ステータス",
+      "statusValue": "対応中",
+      "assignee": "担当者",
+      "threadTitle": "コメント",
+      "threadLead": "スマートフォンでも、長いスレッドがプロパティを画面外へ押し出しません。"
     }
   },
   "serviceLauncherShowcase": {

package/docs/i18n/messages/vi.json

@@ -555,6 +555,16 @@
       "presetsOnlyDescription": "panelRender chỉ trả về Presets — người dùng chọn trong bảng màu, không gõ được mã hex tuỳ ý.",
       "tagColorLabel": "Màu thẻ",
       "tagColorHelper": "Phím mũi tên di chuyển giữa các ô màu; ô đang chọn được đọc lên."
+    },
+    "splitPaneStackOrder": {
+      "title": "stackOrder — đưa cột phụ lên trước khi xếp chồng",
+      "lead": "stackOrder=\"aside-first\" đặt cột phụ lên trên cột chính khi khung quá hẹp để chia đôi, và đặt nó trước trong DOM nên phím Tab cũng tới nó trước. Khi đủ rộng để chia, nó nằm ở cột cuối như mặc định. Khung nhúng bên dưới hẹp hơn ngưỡng chia đôi, nên thẻ thuộc tính nằm trên luồng bình luận.",
+      "propertiesTitle": "Thuộc tính",
+      "status": "Trạng thái",
+      "statusValue": "Đang xử lý",
+      "assignee": "Người phụ trách",
+      "threadTitle": "Bình luận",
+      "threadLead": "Trên điện thoại, luồng bình luận dài không còn đẩy phần thuộc tính xuống dưới."
     }
   },
   "serviceLauncherShowcase": {

package/docs/layout/split-pane.tsx

@@ -10,6 +10,7 @@ import {
   StatCard,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { FileText, Building2, Calendar, CreditCard, ArrowRight } from "lucide-react";
 
 /**
@@ -98,6 +99,7 @@ const yen = (n: number) => yenFormat.format(Math.round(n));
 const toNumber = (amount: string) => Number(amount.replace(/[^0-9]/g, ""));
 
 export default function Demo() {
+  const { t } = useTranslation();
   const [selectedId, setSelectedId] = useState<string>("INV-0241");
   const [asideWidth, setAsideWidth] = useState<"sm" | "md">("md");
   const [threadOpen, setThreadOpen] = useState(true);
@@ -406,6 +408,69 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* ── stackOrder="aside-first" (gh#1057) — the aside stacks ABOVE main when narrow ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.splitPaneStackOrder.title")}</CardTitle>
+            <CardDescription>{t("showcase.splitPaneStackOrder.lead")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card className="max-w-md">
+              <CardContent>
+                <SplitPane
+                  stackOrder="aside-first"
+                  asideWidth="sm"
+                  asideLabel={t("showcase.splitPaneStackOrder.propertiesTitle")}
+                  aside={
+                    <Card variant="muted">
+                      <CardHeader>
+                        <CardTitle level={3} className="text-sm">
+                          {t("showcase.splitPaneStackOrder.propertiesTitle")}
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <Flex direction="col" gap="xs">
+                          <Flex direction="row" justify="between" gap="sm">
+                            <Text tone="muted">{t("showcase.splitPaneStackOrder.status")}</Text>
+                            <Badge tone="info">
+                              {t("showcase.splitPaneStackOrder.statusValue")}
+                            </Badge>
+                          </Flex>
+                          <Flex direction="row" justify="between" gap="sm">
+                            <Text tone="muted">{t("showcase.splitPaneStackOrder.assignee")}</Text>
+                            <Text>{THREAD_REPLIES[0].author}</Text>
+                          </Flex>
+                        </Flex>
+                      </CardContent>
+                    </Card>
+                  }
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle level={3} className="text-sm">
+                        {t("showcase.splitPaneStackOrder.threadTitle")}
+                      </CardTitle>
+                      <CardDescription>
+                        {t("showcase.splitPaneStackOrder.threadLead")}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <Flex direction="col" gap="sm">
+                        {CHANNEL_MESSAGES.map((message) => (
+                          <Flex key={message.author} direction="col" gap="xs">
+                            <Text weight="medium">{message.author}</Text>
+                            <Text tone="muted">{message.body}</Text>
+                          </Flex>
+                        ))}
+                      </Flex>
+                    </CardContent>
+                  </Card>
+                </SplitPane>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Container stress · narrow vs wide embed</CardTitle>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.8.0",
-  "godxUiMcp": "31.8.0",
+  "version": "31.9.0",
+  "godxUiMcp": "31.9.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",