@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-display/welcome.tsx

@@ -1,115 +0,0 @@
-import { useState } from "react";
-
-import { Welcome } from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { Bot, MessageSquare, Settings, Sparkles, Users } from "lucide-react";
-
-/**
- * Welcome — the greeting block at the head of an empty conversation (Ant Design X `Welcome`).
- *
- * It is the first thing an assistant says, so every slot on this page is one Ant X slot at rest:
- * the full block, the two variants, the block with no glyph, and the `icon`-as-URL rule that Ant
- * ports from a string beginning with `http`.
- *
- * Composed only from real @godxjp/ui components.
- */
-const sections: SidebarSectionProp[] = [
-  {
-    label: "アシスタント",
-    items: [
-      { id: "chat", label: "チャット", icon: MessageSquare },
-      { id: "agents", label: "エージェント", icon: Bot },
-      { id: "members", label: "メンバー", icon: Users },
-    ],
-  },
-  { label: "管理", items: [{ id: "settings", label: "設定", icon: Settings }] },
-];
-
-export default function WelcomeDoc() {
-  const [dismissed, setDismissed] = useState(false);
-
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="chat"
-          sections={sections}
-          onSelect={() => {}}
-          product={{ name: "CoreDesk", role: "アシスタント", color: "hsl(var(--primary))" }}
-        />
-      }
-      topbar={<Topbar />}
-    >
-      <PageContainer
-        title="あいさつ"
-        subtitle="Welcome · 会話がまだ一件もない画面の先頭に置く四つのスロット"
-      >
-        {/* THE WHOLE BLOCK. `extra` sits on the title row, which is the placement a hand-roll
-            usually gets wrong (it lands under the description instead). */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            icon · title · description · extra
-          </Text>
-          {dismissed ? (
-            <Text size="xs" tone="muted">
-              閉じました。
-            </Text>
-          ) : (
-            <Welcome
-              icon={<Sparkles />}
-              title="こんにちは、何からはじめますか"
-              description="請求、経費、勤怠のことならお手伝いできます。左の履歴から続きを開くこともできます。"
-              extra={
-                <Button variant="ghost" size="sm" onClick={() => setDismissed(true)}>
-                  閉じる
-                </Button>
-              }
-            />
-          )}
-        </Flex>
-
-        {/* THE TWO VARIANTS, side by side. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            variant · filled と borderless
-          </Text>
-          <Welcome
-            variant="filled"
-            icon={<Bot />}
-            title="filled"
-            description="自分の地色と髪の毛一本分の境界を持つ。カードの中に置いても沈まない。"
-          />
-          <Welcome
-            variant="borderless"
-            icon={<Bot />}
-            title="borderless"
-            description="ページの地の上にそのまま置く。上下に他の要素が続くときはこちら。"
-          />
-        </Flex>
-
-        {/* NO GLYPH, AND AN IMAGE GLYPH. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            icon · 省略と URL
-          </Text>
-          <Welcome
-            title="アイコンなし"
-            description="スロットを渡さなければ、その列自体が出ない。"
-          />
-          <Text size="xs" tone="muted">
-            http で始まる文字列は装飾画像として描かれる（Ant Design X と同じ規則、ただし alt
-            は空）。
-          </Text>
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}

package/docs/data-entry/attachments.tsx

@@ -1,160 +0,0 @@
-import { useState } from "react";
-
-import { Attachments, type AttachmentsItemProp } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { Bot, MessageSquare, Paperclip, Settings, Users } from "lucide-react";
-
-/**
- * Attachments — the file collection that rides a chat surface (Ant Design X `Attachments`).
- *
- * Last of the #559 series. Every slot on this page is one Ant X axis at rest: the empty
- * placeholder, a settled list, the three `overflow` modes, an upload in flight, a failed upload,
- * and the disabled strip.
- *
- * The field names are antd's (`uid`, `name`, `size`, `status`, `percent`, `thumbUrl`,
- * `originFileObj`) so an Ant X call site compiles here unchanged.
- *
- * Composed only from real @godxjp/ui components.
- */
-const sections: SidebarSectionProp[] = [
-  {
-    label: "アシスタント",
-    items: [
-      { id: "chat", label: "チャット", icon: MessageSquare },
-      { id: "agents", label: "エージェント", icon: Bot },
-      { id: "members", label: "メンバー", icon: Users },
-    ],
-  },
-  { label: "管理", items: [{ id: "settings", label: "設定", icon: Settings }] },
-];
-
-const settled: AttachmentsItemProp[] = [
-  { uid: "1", name: "請求書_2026-03.pdf", size: 182_400, status: "done" },
-  { uid: "2", name: "経費明細.xlsx", size: 44_120, status: "done" },
-];
-
-const inFlight: AttachmentsItemProp[] = [
-  { uid: "3", name: "会議録画.mp4", size: 78_300_000, status: "uploading", percent: 42 },
-];
-
-const failed: AttachmentsItemProp[] = [
-  { uid: "4", name: "契約書_原本.pdf", size: 2_400_000, status: "error" },
-];
-
-const many: AttachmentsItemProp[] = Array.from({ length: 6 }, (_, i) => ({
-  uid: `m${i}`,
-  name: `添付_${i + 1}.pdf`,
-  size: 12_000 * (i + 1),
-  status: "done" as const,
-}));
-
-export default function AttachmentsDoc() {
-  const [items, setItems] = useState<AttachmentsItemProp[]>(settled);
-
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="chat"
-          sections={sections}
-          onSelect={() => {}}
-          product={{ name: "CoreDesk", role: "アシスタント", color: "hsl(var(--primary))" }}
-        />
-      }
-      topbar={<Topbar />}
-    >
-      <PageContainer
-        title="添付ファイル"
-        subtitle="Attachments · チャットに載せるファイルの束（Ant Design X）"
-      >
-        {/* EMPTY. The placeholder is the whole control when there is nothing yet: one button,
-            one accessible name, and a drop target that is the same box. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            空のとき · placeholder
-          </Text>
-          <Attachments items={[]} />
-        </Flex>
-
-        {/* THE CONTROLLED LIST. `onChange` carries antd's `{ file, fileList }`, so the removed
-            row arrives as `file` with status "removed" and `fileList` is what remains. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            items · onChange · onRemove
-          </Text>
-          <Attachments
-            items={items}
-            onRemove={() => true}
-            onChange={({ fileList }) => setItems(fileList)}
-          />
-          <Text size="xs" tone="muted">
-            残り {items.length} 件。× を押すと `onChange` が `{"{ file, fileList }"}` で届く。
-          </Text>
-        </Flex>
-
-        {/* STATUS. Uploading carries a determinate Progress; error states the failure in words,
-            not only in tint. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            status · uploading と error
-          </Text>
-          <Attachments items={inFlight} />
-          <Attachments items={failed} />
-        </Flex>
-
-        {/* OVERFLOW. Three modes, same six items — what happens when the row runs out of box. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            overflow · wrap
-          </Text>
-          <Attachments items={many} overflow="wrap" />
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            overflow · scrollX
-          </Text>
-          <Attachments items={many} overflow="scrollX" />
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            overflow · scrollY
-          </Text>
-          <Attachments items={many} overflow="scrollY" />
-        </Flex>
-
-        {/* PLACEHOLDER, OVERRIDDEN. An object, or a function of "inline" | "drop". */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            placeholder · 自分の文言
-          </Text>
-          <Attachments
-            items={[]}
-            placeholder={{
-              icon: <Paperclip />,
-              title: "証憑を添付",
-              description: "領収書・請求書・契約書。PDF と画像に対応します。",
-            }}
-          />
-        </Flex>
-
-        {/* DISABLED. The strip stays readable; nothing in it is reachable. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            disabled
-          </Text>
-          <Attachments items={settled} disabled />
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}

package/docs/data-entry/block-editor.tsx

@@ -1,105 +0,0 @@
-import * as React from "react";
-import { BlockEditor } from "@godxjp/block-editor";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  CodeBlock,
-} from "@godxjp/ui/data-display";
-import { Form, FormField } from "@godxjp/ui/data-entry";
-import { Button } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-import shot from "../assets/shot-landscape.svg";
-
-const initial = `# 議事録 2026-10-05
-
-> [!NOTE] 次回まで
-> 決済モジュールの再発行は **税率変更後** のケースを追加する
-
-- [ ] 仕様の確認
-- [x] [[Guide|設計ガイド]] の更新
-
-:::toggle[詳細]
-「/」でブロックを挿入、⋮⋮ でドラッグ。
-:::
-`;
-
-/** The host's page index — targets are ids, labels are localized like any other copy. */
-const PAGES = [
-  { target: "Guide", labelKey: "blockEditorDocs.pages.guide" },
-  { target: "Setup", labelKey: "blockEditorDocs.pages.setup" },
-  { target: "Release", labelKey: "blockEditorDocs.pages.release" },
-] as const;
-
-/** Stands in for the host's storage: a real app uploads the file and returns `asset:<id>`. */
-async function demoUpload(file: File) {
-  await new Promise((resolve) => setTimeout(resolve, 800));
-  return { url: shot, name: file.name };
-}
-
-/**
- * @godxjp/block-editor — the block editor (gh#1156). A page form: the editor inside a FormField,
- * the Markdown it saves shown beside it (exactly what `normalize()` returns), files through the
- * host's `upload`, `[[` suggestions from the host's page index.
- */
-export default function Demo() {
-  const { t } = useTranslation();
-  const [body, setBody] = React.useState(initial);
-  return (
-    <PageContainer title="BlockEditor" subtitle={t("blockEditorDocs.subtitle")}>
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>{t("blockEditorDocs.edit.title")}</CardTitle>
-          <CardDescription>{t("blockEditorDocs.edit.description")}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Form onSubmit={(event) => event.preventDefault()}>
-            <Flex direction="col" gap="md">
-              <FormField id="block-body" label={t("blockEditorDocs.edit.label")}>
-                <BlockEditor
-                  value={body}
-                  onValueChange={setBody}
-                  upload={demoUpload}
-                  suggestWikilinks={(query) =>
-                    PAGES.map((p) => ({ target: p.target, label: t(p.labelKey) })).filter((p) =>
-                      `${p.target} ${p.label}`.toLowerCase().includes(query.toLowerCase()),
-                    )
-                  }
-                />
-              </FormField>
-              <Flex justify="end">
-                <Button type="submit">{t("blockEditorDocs.edit.save")}</Button>
-              </Flex>
-            </Flex>
-          </Form>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>{t("blockEditorDocs.markdown.title")}</CardTitle>
-          <CardDescription>{t("blockEditorDocs.markdown.description")}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <CodeBlock language="markdown">{body}</CodeBlock>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>{t("blockEditorDocs.readOnly.title")}</CardTitle>
-          <CardDescription>{t("blockEditorDocs.readOnly.description")}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <BlockEditor
-            defaultValue={initial}
-            readOnly
-            aria-label={t("blockEditorDocs.readOnly.label")}
-          />
-        </CardContent>
-      </Card>
-    </PageContainer>
-  );
-}

package/docs/data-entry/branch-scope-picker.tsx

@@ -1,128 +0,0 @@
-/**
- * BranchScopePicker — 適用範囲 (all branches vs an explicit subset).
- *
- * One controlled `{ mode, branchIds }` value; real RadioGroup + CheckboxGroup + SearchInput
- * underneath. `error` is FIELD VALIDATION (aria-errormessage); a failed branch read is
- * `listError`, a refused one is `denied` (#216 vocabulary). Branch data below is demo-only.
- */
-import * as React from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { BranchScopePicker, FormField, type BranchScopeValueProp } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-
-const BRANCHES = [
-  { id: "hq", name: "東京本社", description: "東京都千代田区" },
-  { id: "osaka", name: "大阪支店", description: "大阪府大阪市" },
-  { id: "nagoya", name: "名古屋支店", description: "愛知県名古屋市" },
-  { id: "fukuoka", name: "福岡営業所", description: "福岡県福岡市" },
-  {
-    id: "hanoi",
-    name: "Chi nhánh Hà Nội",
-    description: "Việt Nam · đang chuẩn bị",
-    disabled: true,
-  },
-];
-
-export default function Demo() {
-  const [scope, setScope] = React.useState<BranchScopeValueProp>({ mode: "all" });
-  const [validated, setValidated] = React.useState<BranchScopeValueProp>({
-    mode: "selected",
-    branchIds: [],
-  });
-
-  const validationError =
-    validated.mode === "selected" && (validated.branchIds?.length ?? 0) === 0
-      ? "1 件以上のブランチを選択してください"
-      : undefined;
-
-  return (
-    <PageContainer
-      title="BranchScopePicker"
-      subtitle="「すべてのブランチ」か「選択したブランチのみ」かを 1 つの値で扱う適用範囲コントロール。"
-      density="compact"
-    >
-      <Flex direction="col" gap="lg">
-        <ResponsiveGrid columns={{ md: 2 }}>
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>基本</CardTitle>
-              <CardDescription>
-                既定は「すべてのブランチ」。subset に切り替えると検索付きチェックリストが開く。 mode
-                を戻しても branchIds は保持される。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <FormField label="適用範囲" required>
-                <BranchScopePicker
-                  branches={BRANCHES}
-                  value={scope}
-                  onValueChange={setScope}
-                  notFoundContent="No branch matches that search"
-                />
-              </FormField>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>バリデーション</CardTitle>
-              <CardDescription>
-                「選択したブランチのみ」で 0 件のままのとき、error が aria-errormessage
-                付きで表示される。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <FormField label="通知の配信範囲" required>
-                <BranchScopePicker
-                  branches={BRANCHES}
-                  value={validated}
-                  onValueChange={setValidated}
-                  error={validationError}
-                />
-              </FormField>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>読み取り専用 / 無効</CardTitle>
-              <CardDescription>
-                readOnly は現在値の静的サマリー（バッジ）。disabled は表示のまま操作不可。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="md">
-                <BranchScopePicker
-                  branches={BRANCHES}
-                  value={{ mode: "selected", branchIds: ["hq", "osaka"] }}
-                  readOnly
-                />
-                <BranchScopePicker
-                  branches={BRANCHES}
-                  value={{ mode: "selected", branchIds: ["hq"] }}
-                  disabled
-                />
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>コレクション状態（#216 の語彙）</CardTitle>
-              <CardDescription>loading → denied → listError → empty の優先順位。</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="md">
-                <BranchScopePicker branches={[]} loading />
-                <BranchScopePicker branches={[]} denied />
-                <BranchScopePicker branches={[]} listError />
-                <BranchScopePicker branches={[]} />
-              </Flex>
-            </CardContent>
-          </Card>
-        </ResponsiveGrid>
-      </Flex>
-    </PageContainer>
-  );
-}