@apliteni/apliteni-ui 0.41.5 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.41.5",
+  "version": "0.43.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -28,7 +28,19 @@ import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (mo
 import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 ```
 
-Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Button`, `Badge`, `Card`, `Icon`.
+Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Button`, `Badge`, `Card`, `Icon`.
+
+`Snippet` accepts `label`, `code`, `reveal`, and `copyLabel` props. It treats `code`
+as plain text and copies it exactly as provided. After a successful clipboard write,
+it shows “Copied” for 1.4 seconds. If copying fails, it shows “Copy failed” so readers
+can try again or select the text manually.
+
+```tsx
+<Snippet label="Terminal" code="npm install @apliteni/apliteni-ui" />
+```
+
+Before a reveal snippet, explain that the secret is stored hashed and will not be
+shown again, and ask the reader to copy it now. The page decides when to remove it.
 
 `Button` accepts `size="xs" | "sm" | "md" | "lg"` (default `md`). Use `xs`
 for a small inline control: `<Button size="xs" variant="ghost" icon="copy" iconOnly>Copy</Button>`.
@@ -73,8 +85,7 @@ focus is already back on the opener and the dialog takes no clicks.
 A panel that slides in from an edge of the screen over a scrim. It renders the vanilla
 `drawer()` markup, class for class, so it looks and moves like the kit's drawer, and like
 `Pagination` its styles come from `@apliteni/apliteni-ui/css` rather than from this bundle.
-Group what goes inside it the way `drawerSection()` does — a heading over a `<dl>` of label
-and value rows — rather than in cards; the rules are on Guidelines / Drawers.
+Group its contents with `DrawerSection` and `KeyValueList`; see Guidelines / Drawers.
 
 ```tsx
 <Drawer open={open} title="Transaction" onClose={() => setOpen(false)}
@@ -292,3 +303,32 @@ Clearing the page-jump box, or typing into it and then pressing a step, does not
 page.
 
 `pageSize` defaults to `DEFAULT_PAGE_SIZE` (100). **Breaking:** it used to default to 4.
+
+## KeyValueList and DrawerSection
+
+KeyValueList displays one record’s facts with labels beside their values. Pass rows
+with a label and a React value. Set `columns={2}` to show two label-value pairs on
+each line. Null and undefined values are displayed as an em dash. Boolean values
+are displayed as `false` or `true`, zero remains visible, and strings are preserved.
+Set `redacted` on a row to display “Hidden” with an eye-off icon without rendering
+the value. Below 560px, each label appears above its value, and the layout
+changes to one column.
+
+DrawerSection groups content under a heading and adds a hairline between adjacent
+sections. Its `headingLevel` defaults to 3. Import both the kit CSS and the React
+CSS. Use a table for figures that readers need to compare down a column.
+
+```tsx
+import { DrawerSection, KeyValueList } from '@apliteni/apliteni-ui/react';
+import '@apliteni/apliteni-ui/css';
+import '@apliteni/apliteni-ui/react/css';
+
+<DrawerSection title="Transaction">
+  <KeyValueList rows={[
+    { label: 'Reference', value: <a href="/invoices/1001">INV-1001</a> },
+    { label: 'Amount', value: '€ 1,240.00' },
+    { label: 'Account', redacted: true },
+    { label: 'Note' },
+  ]} />
+</DrawerSection>
+```

package/react/dist/index.css

@@ -114,3 +114,31 @@
     transition: none;
   }
 }
+
+/* src/KeyValueList.css */
+.ui-drawer__rows.ui-kv {
+  grid-template-columns: calc(var(--space-6) * 5) minmax(0, 1fr);
+}
+.ui-drawer__rows.ui-kv--two-columns {
+  grid-template-columns: repeat(2, calc(var(--space-6) * 5) minmax(0, 1fr));
+}
+.ui-kv__hidden {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  color: var(--text);
+}
+.ui-kv__hidden svg {
+  width: var(--space-4);
+  height: var(--space-4);
+  stroke-width: 2.25;
+}
+@media (max-width: 560px) {
+  .ui-drawer__rows.ui-kv {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--space-3);
+  }
+  .ui-kv > .ui-drawer__row {
+    display: block;
+  }
+}

package/react/dist/index.d.ts

@@ -425,7 +425,32 @@ type FilterBarProps = {
 };
 declare function FilterBar(props: FilterBarProps): react.JSX.Element;
 
+type KeyValueRow = {
+    label: string;
+    value?: ReactNode;
+    redacted?: boolean;
+};
+type KeyValueListProps = Omit<ComponentPropsWithoutRef<'dl'>, 'children'> & {
+    rows: readonly KeyValueRow[];
+    columns?: 1 | 2;
+};
+declare function KeyValueList({ rows, columns, className, ...rest }: KeyValueListProps): react.JSX.Element;
+type DrawerSectionProps = Omit<ComponentPropsWithoutRef<'section'>, 'title'> & {
+    title?: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+};
+declare function DrawerSection({ title, headingLevel, className, children, ...rest }: DrawerSectionProps): react.JSX.Element;
+
+type SnippetProps = {
+    label?: string;
+    /** Plain text, displayed and copied without HTML parsing. */
+    code?: string;
+    reveal?: boolean;
+    copyLabel?: string;
+};
+declare function Snippet({ label, code, reveal, copyLabel }: SnippetProps): react.JSX.Element;
+
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, type Filter, FilterBar, type FilterBarProps, Icon, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TableSort, sortTableRows };
+export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TableSort, sortTableRows };

package/react/dist/index.js

@@ -1685,6 +1685,69 @@ function FilterBar(props) {
   return /* @__PURE__ */ jsx16("div", { ref: host, dangerouslySetInnerHTML: initial.current });
 }
 
+// src/KeyValueList.tsx
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function detail({ value, redacted }) {
+  if (redacted) return /* @__PURE__ */ jsxs13("span", { className: "ui-kv__hidden", children: [
+    /* @__PURE__ */ jsx17(Icon, { name: "eyeOff" }),
+    "Hidden"
+  ] });
+  if (value == null) return "\u2014";
+  return typeof value === "boolean" ? String(value) : value;
+}
+function KeyValueList({ rows, columns = 1, className, ...rest }) {
+  return /* @__PURE__ */ jsx17("dl", { ...rest, className: ["ui-drawer__rows", "ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs13("div", { className: "ui-drawer__row", children: [
+    /* @__PURE__ */ jsx17("dt", { children: row.label }),
+    /* @__PURE__ */ jsx17("dd", { children: detail(row) })
+  ] }, index)) });
+}
+function DrawerSection({ title, headingLevel = 3, className, children, ...rest }) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs13("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
+    title != null && /* @__PURE__ */ jsx17(Heading, { className: "ui-drawer__section-title", children: title }),
+    children
+  ] });
+}
+
+// src/Snippet.tsx
+import { useEffect as useEffect5, useRef as useRef9, useState as useState6 } from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function Snippet({ label = "shell", code = "", reveal = false, copyLabel = "Copy" }) {
+  const [status, setStatus] = useState6("idle");
+  const request = useRef9(0);
+  const timer = useRef9(void 0);
+  useEffect5(() => {
+    setStatus("idle");
+    return () => {
+      request.current++;
+      clearTimeout(timer.current);
+    };
+  }, [code]);
+  async function copy() {
+    const current = ++request.current;
+    clearTimeout(timer.current);
+    setStatus("idle");
+    try {
+      await navigator.clipboard.writeText(code);
+      if (current !== request.current) return;
+      setStatus("copied");
+      timer.current = setTimeout(() => setStatus("idle"), 1400);
+    } catch {
+      if (current === request.current) setStatus("failed");
+    }
+  }
+  return /* @__PURE__ */ jsxs14("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "ui-snippet__bar", children: [
+      /* @__PURE__ */ jsx18("span", { children: label }),
+      /* @__PURE__ */ jsxs14("button", { type: "button", className: "ui-snippet__copy", "aria-live": "polite", "aria-atomic": "true", onClick: copy, children: [
+        /* @__PURE__ */ jsx18(Icon, { name: status === "copied" ? "check" : "copy" }),
+        status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : copyLabel
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx18("pre", { children: code })
+  ] });
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -1700,9 +1763,11 @@ export {
   DeltaValue,
   Denied,
   Drawer,
+  DrawerSection,
   Dropdown,
   FilterBar,
   Icon,
+  KeyValueList,
   Modal,
   NumericValue,
   PAGE_SIZES,
@@ -1711,6 +1776,7 @@ export {
   Segmented,
   Skeleton,
   SkeletonTable,
+  Snippet,
   StatBand,
   sortTableRows
 };

package/src/styles/code.css

@@ -14,7 +14,7 @@
   align-items: center;
   padding: 10px 15px;
 }
-.ui-snippet__bar span {
+.ui-snippet__bar > span {
   /* rank: label */
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
@@ -50,6 +50,7 @@
   transition: color var(--dur-fast) var(--ease);
 }
 .ui-snippet__copy:hover { color: var(--accent); }
+.ui-snippet--reveal .ui-snippet__copy:hover { color: var(--strong); }
 .ui-snippet__copy svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; }
 
 /* Shell token highlighting (matches viz/account.mjs classes) */
@@ -63,8 +64,8 @@
 .ui-snippet--reveal {
   background: color-mix(in srgb, var(--green) 10%, var(--surface)); --ring-gap: color-mix(in srgb, var(--green) 10%, var(--surface));
 }
-.ui-snippet--reveal .ui-snippet__bar span { color: var(--green); }
-.ui-snippet--reveal pre { color: var(--green); word-break: break-all; white-space: pre-wrap; }
+.ui-snippet--reveal .ui-snippet__bar > span { color: var(--chip-success-ink); }
+.ui-snippet--reveal pre { color: var(--chip-success-ink); word-break: break-all; white-space: pre-wrap; }
 
 /* Inline code */
 .ui-code {