@godxjp/ui 31.4.0 → 31.5.0

package/dist/components/data-display/org-chart.js

@@ -0,0 +1,169 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useScrollsHorizontally } from "../../lib/hooks.js";
+import { cn } from "../../lib/utils.js";
+import { Tree } from "./tree.js";
+function flatten(nodes) {
+  const out = [];
+  const walk = (list, depth, parent) => {
+    for (const node of list) {
+      const index = out.length;
+      out.push({ node, depth, parent, firstChild: null });
+      if (node.children?.length) {
+        out[index].firstChild = out.length;
+        walk(node.children, depth + 1, index);
+      }
+    }
+  };
+  walk(nodes, 0, null);
+  return out;
+}
+function toTreeData(nodes) {
+  return nodes.map((node) => ({
+    value: node.key,
+    label: node.name,
+    children: node.children?.length ? toTreeData(node.children) : void 0
+  }));
+}
+function isRtl(element) {
+  return element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+}
+function OrgChartRoot({
+  data,
+  renderNode,
+  label,
+  className,
+  id,
+  forwardedRef,
+  ...rest
+}) {
+  const { t } = useTranslation();
+  const reactId = React.useId();
+  const baseId = id ?? `${reactId}-org-chart`;
+  const treeLabel = label ?? t("dataDisplay.orgChart.label");
+  const flat = React.useMemo(() => flatten(data), [data]);
+  const indexByKey = React.useMemo(
+    () => new Map(flat.map((entry, index) => [entry.node.key, index])),
+    [flat]
+  );
+  const scrollRef = React.useRef(null);
+  const scrolls = useScrollsHorizontally(scrollRef, true);
+  const [activeKey, setActiveKey] = React.useState(null);
+  const rovingKey = (activeKey && indexByKey.has(activeKey) ? activeKey : null) ?? flat[0]?.node.key ?? null;
+  const nodeRefs = React.useRef(/* @__PURE__ */ new Map());
+  const moveTo = (index) => {
+    if (index == null) return;
+    const entry = flat[index];
+    if (!entry) return;
+    setActiveKey(entry.node.key);
+    nodeRefs.current.get(entry.node.key)?.focus();
+  };
+  const onKeyDown = (event, index) => {
+    const entry = flat[index];
+    const rtl = isRtl(event.currentTarget);
+    const inward = rtl ? "ArrowLeft" : "ArrowRight";
+    const outward = rtl ? "ArrowRight" : "ArrowLeft";
+    let target;
+    if (event.key === "ArrowDown") target = index + 1 < flat.length ? index + 1 : null;
+    else if (event.key === "ArrowUp") target = index > 0 ? index - 1 : null;
+    else if (event.key === "Home") target = 0;
+    else if (event.key === "End") target = flat.length - 1;
+    else if (event.key === inward) target = entry.firstChild;
+    else if (event.key === outward) target = entry.parent;
+    else return;
+    event.preventDefault();
+    moveTo(target ?? null);
+  };
+  const renderBranch = (nodes) => nodes.map((node, position) => {
+    const index = indexByKey.get(node.key);
+    const { depth } = flat[index];
+    const nodeId = `${baseId}-n${index}`;
+    const groupId = `${nodeId}-group`;
+    const hasChildren = Boolean(node.children?.length);
+    const isAgent = node.variant === "agent";
+    const labelledBy = renderNode ? void 0 : [
+      `${nodeId}-name`,
+      node.title ? `${nodeId}-title` : null,
+      isAgent ? `${nodeId}-kind` : null
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("li", { role: "none", className: "ui-org-chart-branch", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: (element) => {
+            nodeRefs.current.set(node.key, element);
+          },
+          id: nodeId,
+          role: "treeitem",
+          "aria-level": depth + 1,
+          "aria-setsize": nodes.length,
+          "aria-posinset": position + 1,
+          "aria-labelledby": labelledBy,
+          "aria-describedby": !renderNode && node.extra ? `${nodeId}-extra` : void 0,
+          "aria-owns": hasChildren ? groupId : void 0,
+          tabIndex: rovingKey === node.key ? 0 : -1,
+          "data-key": node.key,
+          "data-variant": isAgent ? "agent" : "person",
+          className: "ui-org-chart-node ui-focus-ring",
+          onFocus: () => setActiveKey(node.key),
+          onKeyDown: (event) => onKeyDown(event, index),
+          children: [
+            renderNode ? renderNode(node) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              node.avatar ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-org-chart-avatar", children: node.avatar }) : null,
+              /* @__PURE__ */ jsxs("span", { className: "ui-org-chart-text", children: [
+                /* @__PURE__ */ jsx("span", { id: `${nodeId}-name`, className: "ui-org-chart-name", children: node.name }),
+                node.title ? /* @__PURE__ */ jsx("span", { id: `${nodeId}-title`, className: "ui-org-chart-title", children: node.title }) : null,
+                node.extra ? /* @__PURE__ */ jsx("span", { id: `${nodeId}-extra`, className: "ui-org-chart-extra", children: node.extra }) : null
+              ] })
+            ] }),
+            isAgent ? /* @__PURE__ */ jsx("span", { id: `${nodeId}-kind`, className: "sr-only", children: t("dataDisplay.orgChart.agent") }) : null
+          ]
+        }
+      ),
+      hasChildren ? /* @__PURE__ */ jsx("ul", { id: groupId, role: "group", className: "ui-org-chart-children", children: renderBranch(node.children) }) : null
+    ] }, node.key);
+  });
+  const treeData = React.useMemo(() => toTreeData(data), [data]);
+  const nodeByKey = React.useMemo(
+    () => new Map(flat.map((entry) => [entry.node.key, entry.node])),
+    [flat]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...rest, ref: forwardedRef, id, className: cn("ui-org-chart", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: "ui-org-chart-scroll",
+        ...scrolls ? { role: "region", "aria-label": t("dataDisplay.orgChart.scrollRegion"), tabIndex: 0 } : {},
+        children: /* @__PURE__ */ jsx("ul", { role: "tree", "aria-label": treeLabel, className: "ui-org-chart-tree", children: renderBranch(data) })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "ui-org-chart-list", children: /* @__PURE__ */ jsx(
+      Tree,
+      {
+        "aria-label": treeLabel,
+        treeData,
+        defaultExpandAll: true,
+        titleRender: (treeNode) => {
+          const node = nodeByKey.get(treeNode.value);
+          if (!node) return treeNode.label;
+          if (renderNode) return renderNode(node);
+          return /* @__PURE__ */ jsxs("span", { className: "ui-org-chart-list-row", children: [
+            node.avatar ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-org-chart-avatar", children: node.avatar }) : null,
+            /* @__PURE__ */ jsx("span", { className: "ui-org-chart-name", children: node.name }),
+            node.title ? /* @__PURE__ */ jsx("span", { className: "ui-org-chart-title", children: node.title }) : null,
+            node.variant === "agent" ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.orgChart.agent") }) : null,
+            node.extra ? /* @__PURE__ */ jsx("span", { className: "ui-org-chart-extra", children: node.extra }) : null
+          ] });
+        }
+      }
+    ) })
+  ] });
+}
+const OrgChart = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(OrgChartRoot, { ...props, forwardedRef: ref }));
+OrgChart.displayName = "OrgChart";
+export {
+  OrgChart
+};

package/dist/components/general/typography.d.ts

@@ -2,6 +2,38 @@ import * as React from "react";
 import type { TextProp, TypographyBlockProp } from "../../props/components/general.prop.js";
 import type { TypographyEllipsisConfigProp } from "../../props/vocabulary/index.js";
 export type { TextProp, TextProp as TextProps, HeadingProp, HeadingProp as HeadingProps, TypographyProp, TypographyProp as TypographyProps, TypographyBlockProp, TypographyTitleProp, TypographyTitleProp as TitleProps, ParagraphProp, ParagraphProp as ParagraphProps, LinkProp, LinkProp as LinkProps, } from "../../props/components/general.prop.js";
+/** How long the copy button shows its confirmed state. antd's value (`useCopyClick`). */
+export declare const COPIED_RESET_MS = 3000;
+/** antd `getNode` — `true`/`undefined` take the default; `false` suppresses unless a DOM node is required. */
+export declare function getNode(node: React.ReactNode | boolean | undefined, fallback: React.ReactNode, needDom?: boolean): React.ReactNode;
+/** antd `toCopyConfigList` — `false` suppresses BOTH states, otherwise index 0 = idle, 1 = copied. */
+export declare function toCopyConfigList(value: React.ReactNode | false | undefined): (string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined)[] | readonly [false, false];
+/**
+ * antd `useMergedConfig` — `true` means "on, all defaults"; an object means "on, these overrides".
+ * The boolean is the SUPPORT flag, so `copyable={false}` and `copyable={undefined}` are both off.
+ */
+export declare function useMergedConfig<T extends object>(propConfig: boolean | T | undefined, template?: Partial<T>): [boolean, T];
+/**
+ * The clipboard write, antd's `_util/copy` reduced to the one path a modern browser takes.
+ *
+ * antd keeps a `document.execCommand("copy")` fallback for browsers without the async Clipboard
+ * API. It is NOT ported: `execCommand` is deprecated, every browser in this package's support
+ * matrix ships `navigator.clipboard`, and the fallback's failure mode is worse than none — it
+ * reports success from a synchronous flag that a permission prompt can leave stale, so the UI
+ * claims a copy that never happened. Here a refusal throws, `onCopy` never fires, and the button
+ * never shows its confirmed state.
+ */
+export declare function writeClipboard(text: string, format: "text/plain" | "text/html" | undefined): Promise<void>;
+/**
+ * A tooltip that disappears entirely when its title is suppressed.
+ *
+ * antd wraps every action in `<Tooltip>`; this library's Tooltip is the house primitive and is
+ * composed (`Tooltip > TooltipTrigger > TooltipContent`), so the wrapper lives here.
+ */
+export declare function ActionTooltip({ title, children, }: {
+    title: React.ReactNode;
+    children: React.ReactNode;
+}): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | null | undefined;
 /**
  * Text — the typographic primitive, and antd's `Typography.Text`.
  *

package/dist/components/general/typography.js

@@ -62,7 +62,10 @@ async function writeClipboard(text, format) {
 function childrenToText(children) {
   return React.Children.toArray(children).map((node) => typeof node === "string" || typeof node === "number" ? String(node) : "").join("");
 }
-function ActionTooltip({ title, children }) {
+function ActionTooltip({
+  title,
+  children
+}) {
   if (title === null || title === void 0 || title === false || title === "") return children;
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
@@ -654,10 +657,16 @@ const Typography = Object.assign(TypographyRoot, {
   Link
 });
 export {
+  ActionTooltip,
+  COPIED_RESET_MS,
   Heading,
   Link,
   Paragraph,
   Text,
   Title,
-  Typography
+  Typography,
+  getNode,
+  toCopyConfigList,
+  useMergedConfig,
+  writeClipboard
 };

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.4.0",
+  "version": "31.5.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -371,6 +371,11 @@
         "abort": "stopped"
       }
     },
+    "orgChart": {
+      "label": "Organization chart",
+      "scrollRegion": "Scrollable organization chart",
+      "agent": "AI agent"
+    },
     "timeline": {
       "statusDone": "Completed: ",
       "statusCurrent": "Current: ",
@@ -419,6 +424,11 @@
       "edit": "Edit",
       "expand": "Expand",
       "collapse": "Collapse"
+    },
+    "codeBlock": {
+      "copy": "Copy code",
+      "copied": "Copied",
+      "copiedAnnounce": "Code copied to clipboard"
     }
   },
   "navigation": {

package/dist/i18n/messages/ja.json

@@ -364,6 +364,11 @@
         "abort": "中断"
       }
     },
+    "orgChart": {
+      "label": "組織図",
+      "scrollRegion": "スクロールできる組織図",
+      "agent": "AIエージェント"
+    },
     "timeline": {
       "statusDone": "完了: ",
       "statusCurrent": "現在: ",
@@ -412,6 +417,11 @@
       "edit": "編集",
       "expand": "展開",
       "collapse": "折りたたむ"
+    },
+    "codeBlock": {
+      "copy": "コードをコピー",
+      "copied": "コピーしました",
+      "copiedAnnounce": "コードをクリップボードにコピーしました"
     }
   },
   "navigation": {

package/dist/i18n/messages/vi.json

@@ -365,6 +365,11 @@
         "abort": "đã dừng"
       }
     },
+    "orgChart": {
+      "label": "Sơ đồ tổ chức",
+      "scrollRegion": "Sơ đồ tổ chức có thể cuộn",
+      "agent": "Tác tử AI"
+    },
     "timeline": {
       "statusDone": "Đã xong: ",
       "statusCurrent": "Hiện tại: ",
@@ -413,6 +418,11 @@
       "edit": "Sửa",
       "expand": "Mở rộng",
       "collapse": "Thu gọn"
+    },
+    "codeBlock": {
+      "copy": "Sao chép mã",
+      "copied": "Đã sao chép",
+      "copiedAnnounce": "Đã sao chép mã vào bộ nhớ tạm"
     }
   },
   "navigation": {

package/dist/props/components/data-display.prop.d.ts

@@ -22,6 +22,13 @@ export type CodeBlockProp = {
     size?: Extract<SizeProp, "xs" | "sm">;
     /** Lands on `data-language`; no highlighter is bundled — see `children` for colouring its output. */
     language?: string;
+    /**
+     * A copy button in the block's inline-end corner — antd `Typography`'s `copyable`, same name and
+     * semantics. `true` copies the block's text content; the object form sets `text`, `onCopy`,
+     * `tooltips` (`[copy, copied]`, or `false`), `icon` (`[copy, copied]`), `format` and `tabIndex`.
+     * The copy is announced politely to assistive technology.
+     */
+    copyable?: boolean | TypographyCopyConfigProp;
     className?: ClassNameProp;
 };
 /**
@@ -36,7 +43,7 @@ export type ProseProp = {
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
-import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, GetRowLabelProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, GapProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, OnClickProp, ValueProp, DefaultValueProp, OnValueChangeProp } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ExtraProp, ColumnDefProp, GetRowIdProp, GetRowLabelProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, GapProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, OnClickProp, ValueProp, DefaultValueProp, OnValueChangeProp, TypographyCopyConfigProp } from "../vocabulary/index.js";
 import type { TreeFieldNamesProp, TreeOptionProp } from "./data-entry.prop.js";
 /**
  * One key in a `Legend`: a tone, and the words that tone stands for.
@@ -1126,3 +1133,46 @@ export type MarqueeProp = Omit<React.HTMLAttributes<HTMLDivElement>, "onPlay" |
     label?: LabelProp;
     className?: ClassNameProp;
 };
+/**
+ * @see OrgChart — who a box stands for. `agent` draws the box with a DASHED border so an AI agent
+ * is told apart from a person at a glance, and adds a localized visually hidden "AI agent" to the
+ * node's accessible name, so the difference is never carried by the stroke alone (WCAG 1.4.1).
+ */
+export type OrgChartNodeVariantProp = "person" | "agent";
+/** @see OrgChart — one box of the chart. */
+export type OrgChartNodeProp = {
+    /** Identity of the node. Unique across the whole chart. */
+    key: string;
+    /** The person's or agent's name — the box's first line and the start of its accessible name. */
+    name: React.ReactNode;
+    /** Role / job title, the line under the name. */
+    title?: TitleProp;
+    /** The mark at the box's inline start — usually an `<Avatar>`. Decorative; the name carries identity. */
+    avatar?: React.ReactNode;
+    /** Free slot under the text — a Badge, a status, a count. */
+    extra?: ExtraProp;
+    /** `person` (default) or `agent` (dashed box). */
+    variant?: OrgChartNodeVariantProp;
+    children?: readonly OrgChartNodeProp[];
+};
+/**
+ * @see OrgChart — an organization chart: boxes joined by lines, top-down, with a horizontal scroll
+ * region of its own when the chart is wider than its container, and an indented `Tree` of the same
+ * data when the CONTAINER is narrow. It is the WAI-ARIA APG tree view in both forms.
+ */
+export type OrgChartProp = {
+    /** The hierarchy. Usually one root; several roots render side by side. */
+    data: readonly OrgChartNodeProp[];
+    /**
+     * Replace the box's content (avatar · name · title · extra) with your own. The box, its border,
+     * the connectors and the keyboard stay the library's. Used by the narrow `Tree` form too.
+     */
+    renderNode?: (node: OrgChartNodeProp) => React.ReactNode;
+    /**
+     * Accessible name of the chart (the `role="tree"`) — a plain string. A localized default
+     * ("Organization chart") applies when omitted.
+     */
+    label?: Extract<LabelProp, string>;
+    className?: ClassNameProp;
+    id?: IdProp;
+};

package/dist/props/registry.d.ts

@@ -3929,6 +3929,45 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["TitleProp", "DescriptionProp", "IconProp", "StatusProp", "ControlVariantProp", "DisabledProp", "OnClickProp", "IdProp", "ClassNameProp"];
     };
+    readonly OrgChartNodeVariantProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["ControlVariantProp"];
+    };
+    readonly OrgChartNodeProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["TitleProp", "ExtraProp", "ControlVariantProp", {
+            readonly field: "key";
+            readonly local: true;
+            readonly reason: "The node's identity, unique across the chart.";
+        }, {
+            readonly field: "name";
+            readonly local: true;
+            readonly reason: "The person's or agent's display name (a ReactNode), not a form field `name` — NameProp is the submitted-field key.";
+        }, {
+            readonly field: "avatar";
+            readonly local: true;
+            readonly reason: "The mark at the box's inline start, usually an <Avatar>. Decorative.";
+        }, {
+            readonly field: "children";
+            readonly local: true;
+            readonly reason: "The node's own reports — the hierarchy itself, not a slot.";
+        }];
+    };
+    readonly OrgChartProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "ClassNameProp", "IdProp", {
+            readonly field: "data";
+            readonly local: true;
+            readonly reason: "The hierarchy of OrgChartNodeProp — the same shape feeds the boxes and the narrow Tree.";
+        }, {
+            readonly field: "renderNode";
+            readonly local: true;
+            readonly reason: "Escape hatch replacing a box's content; the box, connectors and keyboard stay the library's.";
+        }];
+    };
 };
 export type ComponentPropName = keyof typeof COMPONENT_PROP_REGISTRY;
 /** Forbidden duplicate concepts — use the canonical name on the left. */

package/dist/props/registry.js

@@ -4764,6 +4764,55 @@ const COMPONENT_PROP_REGISTRY = {
       "IdProp",
       "ClassNameProp"
     ]
+  },
+  OrgChartNodeVariantProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: ["ControlVariantProp"]
+  },
+  OrgChartNodeProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "TitleProp",
+      "ExtraProp",
+      "ControlVariantProp",
+      { field: "key", local: true, reason: "The node's identity, unique across the chart." },
+      {
+        field: "name",
+        local: true,
+        reason: "The person's or agent's display name (a ReactNode), not a form field `name` \u2014 NameProp is the submitted-field key."
+      },
+      {
+        field: "avatar",
+        local: true,
+        reason: "The mark at the box's inline start, usually an <Avatar>. Decorative."
+      },
+      {
+        field: "children",
+        local: true,
+        reason: "The node's own reports \u2014 the hierarchy itself, not a slot."
+      }
+    ]
+  },
+  OrgChartProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "ClassNameProp",
+      "IdProp",
+      {
+        field: "data",
+        local: true,
+        reason: "The hierarchy of OrgChartNodeProp \u2014 the same shape feeds the boxes and the narrow Tree."
+      },
+      {
+        field: "renderNode",
+        local: true,
+        reason: "Escape hatch replacing a box's content; the box, connectors and keyboard stay the library's."
+      }
+    ]
   }
 };
 const PROP_ALIASES_FORBIDDEN = {

package/dist/styles/data-display-layout.css

@@ -1120,6 +1120,27 @@
     max-block-size: var(--code-block-max-height-lg);
   }
 
+  .ui-code-block-frame {
+    position: relative;
+    min-inline-size: 0;
+  }
+
+  .ui-code-block[data-copyable] {
+    padding-inline-end: calc(var(--code-block-space-inset) + var(--control-height-xs));
+  }
+
+  .ui-code-block-copy {
+    position: absolute;
+    inset-block-start: var(--space-1);
+    inset-inline-end: var(--space-1);
+  }
+
+  @media (pointer: coarse) {
+    .ui-code-block[data-copyable] {
+      padding-inline-end: calc(var(--code-block-space-inset) + var(--control-height-default));
+    }
+  }
+
   .ui-code-block [data-code-token="comment"],
   .ui-prose pre [data-code-token="comment"] {
     color: var(--code-block-token-comment-color, hsl(var(--muted-foreground)));
@@ -2430,3 +2451,155 @@
     flex-direction: column;
   }
 }
+
+@layer components {
+
+  .ui-org-chart {
+    min-inline-size: 0;
+    container: org-chart / inline-size;
+  }
+
+  .ui-org-chart-scroll {
+    overflow-x: auto;
+    padding: var(--org-chart-padding);
+  }
+
+  .ui-org-chart-tree,
+  .ui-org-chart-children {
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ui-org-chart-tree {
+    inline-size: max-content;
+    min-inline-size: 100%;
+  }
+
+  .ui-org-chart-branch {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-inline: calc(var(--org-chart-sibling-gap) / 2);
+  }
+
+  .ui-org-chart-children {
+    position: relative;
+    padding-block-start: calc(var(--org-chart-level-gap) / 2);
+  }
+
+  .ui-org-chart-children::before,
+  .ui-org-chart-children > .ui-org-chart-branch::before,
+  .ui-org-chart-children > .ui-org-chart-branch::after {
+    position: absolute;
+    box-sizing: border-box;
+    inset-block-start: 0;
+    block-size: calc(var(--org-chart-level-gap) / 2);
+    border: 0 solid var(--org-chart-line-color, hsl(var(--border)));
+    content: "";
+  }
+
+  .ui-org-chart-children::before {
+    inset-inline-start: calc(50% - var(--org-chart-line-width, var(--stroke-hairline)) / 2);
+    border-inline-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch {
+    padding-block-start: calc(var(--org-chart-level-gap) / 2);
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch::before {
+    inset-inline: 0 50%;
+    border-block-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch::after {
+    inset-inline: calc(50% - var(--org-chart-line-width, var(--stroke-hairline)) / 2) 0;
+    border-block-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+    border-inline-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch:first-child::before,
+  .ui-org-chart-children > .ui-org-chart-branch:last-child::after {
+    border-block-start-width: 0;
+  }
+
+  .ui-org-chart-node {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    inline-size: var(--org-chart-node-inline-size);
+    align-items: flex-start;
+    gap: var(--org-chart-node-gap);
+    padding-block: var(--org-chart-node-padding-block);
+    padding-inline: var(--org-chart-node-padding-inline);
+    border: var(--org-chart-node-border-width, var(--stroke-hairline)) solid
+      var(--org-chart-node-border-color, hsl(var(--border)));
+    border-radius: var(--org-chart-node-radius, var(--radius));
+    background: var(--org-chart-node-background, hsl(var(--card)));
+    color: var(--org-chart-node-foreground, hsl(var(--card-foreground)));
+    font-size: var(--org-chart-node-font-size);
+    text-align: start;
+  }
+
+  .ui-org-chart-node[data-variant="agent"] {
+    border-style: var(--org-chart-agent-border-style);
+  }
+
+  .ui-org-chart-avatar {
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  .ui-org-chart-text {
+    display: flex;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--org-chart-node-text-gap);
+  }
+
+  .ui-org-chart-name {
+    font-weight: var(--font-weight-medium);
+    overflow-wrap: anywhere;
+  }
+
+  .ui-org-chart-title {
+    color: var(--org-chart-node-title-color, hsl(var(--muted-foreground)));
+    overflow-wrap: anywhere;
+  }
+
+  .ui-org-chart-extra {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--org-chart-node-text-gap);
+  }
+
+  .ui-org-chart-list {
+    display: none;
+  }
+
+  .ui-org-chart-list-row {
+    display: inline-flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--org-chart-node-gap);
+  }
+
+  .ui-org-chart-list-row .ui-org-chart-extra {
+    display: inline-flex;
+  }
+
+  @container org-chart (width < 40rem) {
+    .ui-org-chart-scroll {
+      display: none;
+    }
+
+    .ui-org-chart-list {
+      display: block;
+    }
+  }
+}