@apliteni/apliteni-ui 0.42.0 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.42.0",
+  "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>`.

package/react/dist/index.d.ts

@@ -441,7 +441,16 @@ type DrawerSectionProps = Omit<ComponentPropsWithoutRef<'section'>, 'title'> & {
 };
 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, 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, 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

@@ -1709,6 +1709,45 @@ function DrawerSection({ title, headingLevel = 3, className, children, ...rest }
   ] });
 }
 
+// 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;
@@ -1737,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 {