@knkcs/anker 1.12.0 → 2.0.0

package/CLAUDE-ANKER.md

@@ -65,6 +65,7 @@ The full human-facing spec lives at the anker GitHub Pages docs site (linked fro
 - **No `maxW` on a Card inside a settings/detail template body.** The template controls width; per-card overrides break visual rhythm and produce orphaned narrow cards on full-width pages. Why: the template is the contract for body width — cards are the contract for content surfacing.
 - **No inline create-forms above a DataTable.** Use a header-action button (or `usePageActions` from a tab) that opens a `Modal`. Why: inline forms steal vertical space, drift from the master pattern, and split form state from the rest of the page.
 - **Don't own `<Tabs.Root>` for an owned-panels tab page.** Use `SettingsPageTemplate.bodyTabs` or `DetailPageTemplate.bodyTabs`. Why: the template enforces `lazyMount unmountOnExit` so `usePageActions` registrations from inactive tabs can't collide with the active tab's. Consumer-owned `<Tabs.Root>` was the cause of the "stuck Add button" bug fixed in anker 1.12. The `tabs` prop on those templates is for nav-mode/filter-mode strips only (Tabs.List, no Tabs.Content).
+- **Don't wrap Card children in `<Box p="N">`.** `<Card>` body has built-in padding via Chakra's CardBody (~24px). Wrapping in `<Box p>` doubles it. Pass content directly (use `<Stack>` for layout). Why: a uniform Card body padding is the visual contract; per-Card overrides break visual rhythm and make Cards look heavier than the rest of the design system.
 
 ---
 

package/dist/components/index.d.ts

@@ -1,8 +1,8 @@
 export { A as AuthCard, a as AuthCardProps, P as PageHeader, b as PageHeaderBreadcrumb, c as PageHeaderProps } from '../page-header-D-kxNn-f.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { MouseEventHandler } from 'react';
-import { CardRootProps, TextProps, IconButtonProps, DrawerRootProps, DialogRootProps, HTMLChakraProps, Timeline, TreeView } from '@chakra-ui/react';
+import React__default, { ReactNode, MouseEventHandler } from 'react';
+import { CardRootProps, TextProps, IconButtonProps, DrawerRootProps, HTMLChakraProps, DialogRootProps, Timeline, TreeView } from '@chakra-ui/react';
 export { TreeCollection, createTreeCollection } from '@chakra-ui/react';
 import { ColumnDef, RowSelectionState, OnChangeFn, SortingState, Row } from '@tanstack/react-table';
 import { a as SwitchProps } from '../switch-B0o6G2XE.js';
@@ -425,6 +425,26 @@ declare const DataTable: typeof DataTableInner & {
     displayName: string;
 };
 
+interface DescriptionListProps {
+    orientation?: "horizontal" | "vertical";
+    gap?: string;
+    children: ReactNode;
+}
+declare function DescriptionList({ orientation, gap, children, }: DescriptionListProps): react_jsx_runtime.JSX.Element;
+declare namespace DescriptionList {
+    var displayName: string;
+    var Row: typeof DescriptionListRow;
+}
+interface DescriptionListRowProps {
+    label: ReactNode;
+    mono?: boolean;
+    children: ReactNode;
+}
+declare function DescriptionListRow({ label, mono, children, }: DescriptionListRowProps): react_jsx_runtime.JSX.Element;
+declare namespace DescriptionListRow {
+    var displayName: string;
+}
+
 interface DrawerProps extends Omit<DrawerRootProps, "open" | "onOpenChange"> {
     /** Whether the drawer is open. */
     open: boolean;
@@ -494,6 +514,28 @@ interface InlineCreatableListProps<T> {
 }
 declare const InlineCreatableList: <T>(props: InlineCreatableListProps<T>) => React$1.ReactElement;
 
+interface KnkLogoProps extends Omit<HTMLChakraProps<"img">, "as" | "src" | "alt" | "invert"> {
+    /** Pixel or token size; controls width. Default 48. */
+    boxSize?: number | string;
+    /**
+     * When true, applies a CSS filter to render the logo in white,
+     * suitable for dark backgrounds like the primary-colored sidebar.
+     */
+    invert?: boolean;
+    /** Override the default "knkcms" alt text. */
+    alt?: string;
+}
+/**
+ * KnkLogo renders the knkcms brand mark via an <img> referencing the
+ * SVG asset. Use the `invert` prop on dark backgrounds (e.g. the
+ * primary-colored sidebar) until the source SVG is rewritten to use
+ * `currentColor` for fills.
+ */
+declare const KnkLogo: {
+    ({ boxSize, invert, alt, ...rest }: KnkLogoProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface LabeledSwitchProps extends SwitchProps {
     name: string;
     label: string;
@@ -603,8 +645,8 @@ interface SidebarProps {
     children: React__default.ReactNode;
 }
 interface SidebarLogoProps {
-    wordmark: string;
-    subtitle?: string;
+    /** Lowercase product name, e.g. "odon", "core", "mediahub". */
+    productName: string;
 }
 interface SidebarSectionProps$1 {
     label: string;
@@ -652,7 +694,7 @@ declare const Sidebar: {
         displayName: string;
     };
     Logo: {
-        ({ wordmark, subtitle }: SidebarLogoProps): react_jsx_runtime.JSX.Element;
+        ({ productName }: SidebarLogoProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     Slot: {
@@ -960,4 +1002,4 @@ interface WidgetProps {
 }
 declare const Widget: React__default.FC<WidgetProps>;
 
-export { ActionCell, type ActionCellAction, type ActionCellProps, BooleanCell, type BooleanCellProps, BulkActionBar, type BulkActionBarProps, type BulkActionProps, type BulkPopoverActionProps, Card, CardList, CardListData, type CardListDataProps, CardListItem, type CardListItemProps, type CardListMenuItem, type CardListProps, type CardProps, ChipPicker, type ChipPickerProps, CodeCell, type CodeCellProps, ColorSwatchCell, type ColorSwatchCellProps, ContextRail, type ContextRailHeaderProps, type ContextRailProps, type ContextRailSectionProps, CountCell, type CountCellProps, DataTable, type DataTableProps, DateCell, type DateCellProps, DeviceCell, type DeviceCellProps, type DrawerProps, DrawerRoot, FactBox, type FactBoxAction, type FactBoxProps, IdentityCell, type IdentityCellProps, InlineCreatableList, type InlineCreatableListProps, LabeledSwitch, type LabeledSwitchProps, LinkCell, type LinkCellProps, MenuCell, type MenuCellAction, type MenuCellProps, Modal, type ModalProps, NumberCell, type NumberCellProps, Pagination, type PaginationProps, SelectableCard, type SelectableCardBodyProps, type SelectableCardFooterProps, type SelectableCardProps, type SelectableCardThumbnailProps, Sidebar, type SidebarItemProps, type SidebarLogoProps, type SidebarSectionProps$1 as SidebarNavSectionProps, type SidebarProps, SidebarSection, type SidebarSectionProps, type SidebarUserMenuItemProps, type SidebarUserMenuProps, SlugCell, type SlugCellProps, StatusBadgeCell, type StatusBadgeCellProps, Stepper, StepperCompleted, StepperContainer, StepperContent, type StepperContentProps, StepperIcon, type StepperIconProps, type StepperProps, StepperProvider, StepperSeparator, type StepperSeparatorProps, StepperStep, type StepperStepProps, StepperStepTitle, StepperSteps, type StepperStepsProps, SwitchCell, type SwitchCellProps, CardList as Table, CardListData as TableData, type CardListDataProps as TableDataProps, CardListItem as TableItem, type CardListItemProps as TableItemProps, type CardListMenuItem as TableMenuItem, type CardListProps as TableProps, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, type TimelineItemProps, TimelineRoot, type TimelineRootProps, TimelineSeparator, TimelineTitle, Toolbar, type ToolbarFilterChipProps, type ToolbarSearchProps, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, type TreeViewBranchProps, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, type TreeViewItemProps, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, type TreeViewRootProps, TreeViewTree, TruncatedTextCell, type TruncatedTextCellProps, UploadDropZone, type UploadDropZoneProps, UrlCell, type UrlCellProps, type UseStepProps, type UseStepperProps, type UseStepperReturn, Widget, type WidgetProps, emptyCellValue, formatUserAgent, parseUserAgent, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
+export { ActionCell, type ActionCellAction, type ActionCellProps, BooleanCell, type BooleanCellProps, BulkActionBar, type BulkActionBarProps, type BulkActionProps, type BulkPopoverActionProps, Card, CardList, CardListData, type CardListDataProps, CardListItem, type CardListItemProps, type CardListMenuItem, type CardListProps, type CardProps, ChipPicker, type ChipPickerProps, CodeCell, type CodeCellProps, ColorSwatchCell, type ColorSwatchCellProps, ContextRail, type ContextRailHeaderProps, type ContextRailProps, type ContextRailSectionProps, CountCell, type CountCellProps, DataTable, type DataTableProps, DateCell, type DateCellProps, DescriptionList, type DescriptionListProps, type DescriptionListRowProps, DeviceCell, type DeviceCellProps, type DrawerProps, DrawerRoot, FactBox, type FactBoxAction, type FactBoxProps, IdentityCell, type IdentityCellProps, InlineCreatableList, type InlineCreatableListProps, KnkLogo, type KnkLogoProps, LabeledSwitch, type LabeledSwitchProps, LinkCell, type LinkCellProps, MenuCell, type MenuCellAction, type MenuCellProps, Modal, type ModalProps, NumberCell, type NumberCellProps, Pagination, type PaginationProps, SelectableCard, type SelectableCardBodyProps, type SelectableCardFooterProps, type SelectableCardProps, type SelectableCardThumbnailProps, Sidebar, type SidebarItemProps, type SidebarLogoProps, type SidebarSectionProps$1 as SidebarNavSectionProps, type SidebarProps, SidebarSection, type SidebarSectionProps, type SidebarUserMenuItemProps, type SidebarUserMenuProps, SlugCell, type SlugCellProps, StatusBadgeCell, type StatusBadgeCellProps, Stepper, StepperCompleted, StepperContainer, StepperContent, type StepperContentProps, StepperIcon, type StepperIconProps, type StepperProps, StepperProvider, StepperSeparator, type StepperSeparatorProps, StepperStep, type StepperStepProps, StepperStepTitle, StepperSteps, type StepperStepsProps, SwitchCell, type SwitchCellProps, CardList as Table, CardListData as TableData, type CardListDataProps as TableDataProps, CardListItem as TableItem, type CardListItemProps as TableItemProps, type CardListMenuItem as TableMenuItem, type CardListProps as TableProps, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, type TimelineItemProps, TimelineRoot, type TimelineRootProps, TimelineSeparator, TimelineTitle, Toolbar, type ToolbarFilterChipProps, type ToolbarSearchProps, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, type TreeViewBranchProps, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, type TreeViewItemProps, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, type TreeViewRootProps, TreeViewTree, TruncatedTextCell, type TruncatedTextCellProps, UploadDropZone, type UploadDropZoneProps, UrlCell, type UrlCellProps, type UseStepProps, type UseStepperProps, type UseStepperReturn, Widget, type WidgetProps, emptyCellValue, formatUserAgent, parseUserAgent, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };

package/dist/components/index.js

@@ -8,7 +8,7 @@ export { AuthCard, PageHeader } from '../chunk-D5ICTOCW.js';
 import { Box, Flex, Heading, Text, HStack, Grid, GridItem, Code, VStack, Link, Spacer, Stack } from '../chunk-G4QMIXLC.js';
 import { PanelRightOpen, PanelRightClose, ChevronRight, Search, PanelLeftOpen, PanelLeftClose, X, Ellipsis, Plus, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { createContext as createContext$1, Timeline, TreeView, Card as Card$1, Menu, Portal, Checkbox, Drawer, ButtonGroup, Dialog, useSlotRecipe, chakra } from '@chakra-ui/react';
+import { createContext as createContext$1, Timeline, TreeView, chakra, Card as Card$1, Menu, Portal, Checkbox, Drawer, ButtonGroup, Dialog, useSlotRecipe } from '@chakra-ui/react';
 export { createTreeCollection } from '@chakra-ui/react';
 import React3, { createContext, useState, useEffect, useMemo, useContext, useRef, Children, useCallback } from 'react';
 import dayjs from 'dayjs';
@@ -1175,6 +1175,53 @@ function DataTableInner(props) {
 }
 var DataTable = DataTableInner;
 DataTable.displayName = "DataTable";
+var DescriptionListContext = createContext({
+  orientation: "horizontal"
+});
+function DescriptionList({
+  orientation = "horizontal",
+  gap = "3",
+  children
+}) {
+  return /* @__PURE__ */ jsx(DescriptionListContext.Provider, { value: { orientation }, children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap, children }) }) });
+}
+DescriptionList.displayName = "DescriptionList";
+function DescriptionListRow({
+  label,
+  mono,
+  children
+}) {
+  const { orientation } = useContext(DescriptionListContext);
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "muted", mb: "0.5", children: label }),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          fontSize: "sm",
+          fontFamily: mono ? "mono" : void 0,
+          wordBreak: "break-all",
+          children
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "baseline", gap: "3", children: [
+    /* @__PURE__ */ jsx(Text, { color: "muted", fontSize: "sm", children: label }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        fontSize: "sm",
+        fontFamily: mono ? "mono" : void 0,
+        textAlign: "right",
+        wordBreak: "break-all",
+        children
+      }
+    )
+  ] });
+}
+DescriptionListRow.displayName = "DescriptionList.Row";
+DescriptionList.Row = DescriptionListRow;
 var DrawerRoot = ({
   children,
   title,
@@ -1539,6 +1586,26 @@ function InlineCreatableListInner(props) {
 }
 var InlineCreatableList = InlineCreatableListInner;
 InlineCreatableList.displayName = "InlineCreatableList";
+
+// src/assets/knk-logo.svg
+var knk_logo_default = "../knk-logo-P6UYZTG6.svg";
+var KnkLogo = ({
+  boxSize = 48,
+  invert = false,
+  alt = "knkcms",
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  chakra.img,
+  {
+    src: knk_logo_default,
+    alt,
+    width: boxSize,
+    height: "auto",
+    filter: invert ? "brightness(0) invert(1)" : void 0,
+    ...rest
+  }
+);
+KnkLogo.displayName = "KnkLogo";
 var LabeledSwitch = ({
   ref,
   ...props
@@ -1761,7 +1828,7 @@ var SidebarBody = ({ children }) => /* @__PURE__ */ jsx(Box, { flex: "1", overfl
 SidebarBody.displayName = "Sidebar.Body";
 var SidebarFooter = ({ children }) => /* @__PURE__ */ jsx(Box, { p: "3", borderTopWidth: "1px", borderTopColor: "border", children });
 SidebarFooter.displayName = "Sidebar.Footer";
-var SidebarLogo = ({ wordmark, subtitle }) => {
+var SidebarLogo = ({ productName }) => {
   const { collapsed, toggle } = useSidebarContext();
   const toggleButton = /* @__PURE__ */ jsx(
     IconButton,
@@ -1776,58 +1843,35 @@ var SidebarLogo = ({ wordmark, subtitle }) => {
   );
   if (collapsed) {
     return /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", gap: "2", children: [
-      /* @__PURE__ */ jsx(
-        Heading,
-        {
-          as: "span",
-          fontSize: "lg",
-          fontWeight: "bold",
-          color: "primary.700",
-          letterSpacing: "tight",
-          children: wordmark.charAt(0)
-        }
-      ),
+      /* @__PURE__ */ jsx(KnkLogo, { boxSize: 28, invert: true }),
       toggleButton
     ] });
   }
-  return /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      direction: "row",
-      align: "center",
-      justify: "space-between",
-      gap: "2",
-      w: "full",
-      children: [
-        /* @__PURE__ */ jsxs(Box, { mb: subtitle ? "0" : "0", children: [
-          /* @__PURE__ */ jsx(
-            Heading,
-            {
-              as: "span",
-              fontSize: "lg",
-              fontWeight: "bold",
-              color: "primary.700",
-              letterSpacing: "tight",
-              children: wordmark
-            }
-          ),
-          subtitle && /* @__PURE__ */ jsx(
-            Text,
-            {
-              fontSize: "2xs",
-              fontWeight: "semibold",
-              letterSpacing: "wider",
-              textTransform: "uppercase",
-              color: "muted",
-              mt: "0.5",
-              children: subtitle
-            }
-          )
-        ] }),
-        toggleButton
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", gap: "2", w: "full", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", gap: "2", pb: "3", children: [
+      /* @__PURE__ */ jsx(KnkLogo, { boxSize: 48, invert: true }),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          fontSize: "sm",
+          fontWeight: "semibold",
+          color: "currentColor",
+          lineHeight: "1",
+          children: productName
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        w: "full",
+        borderBottomWidth: "1px",
+        borderBottomColor: "whiteAlpha.200",
+        mb: "2"
+      }
+    ),
+    /* @__PURE__ */ jsx(Flex, { w: "full", justify: "flex-end", children: toggleButton })
+  ] });
 };
 SidebarLogo.displayName = "Sidebar.Logo";
 var SidebarSlot = ({ children }) => /* @__PURE__ */ jsx(Box, { mt: "3", children });
@@ -2647,6 +2691,6 @@ var Widget = ({
 };
 Widget.displayName = "Widget";
 
-export { ActionCell, BooleanCell, BulkActionBar, Card, CardList, CardListData, CardListItem, ChipPicker, CodeCell, ColorSwatchCell, ContextRail, CountCell, DataTable, DateCell, DeviceCell, DrawerRoot, FactBox, IdentityCell, InlineCreatableList, LabeledSwitch, LinkCell, MenuCell, Modal, NumberCell, Pagination, SelectableCard, Sidebar, SidebarSection2 as SidebarSection, SlugCell, StatusBadgeCell, Stepper, StepperCompleted, StepperContainer, StepperContent, StepperIcon, StepperProvider, StepperSeparator, StepperStep, StepperStepTitle, StepperSteps, SwitchCell, CardList as Table, CardListData as TableData, CardListItem as TableItem, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineRoot, TimelineSeparator, TimelineTitle, Toolbar, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, TreeViewTree, TruncatedTextCell, UploadDropZone, UrlCell, Widget, emptyCellValue, formatUserAgent, parseUserAgent, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
+export { ActionCell, BooleanCell, BulkActionBar, Card, CardList, CardListData, CardListItem, ChipPicker, CodeCell, ColorSwatchCell, ContextRail, CountCell, DataTable, DateCell, DescriptionList, DeviceCell, DrawerRoot, FactBox, IdentityCell, InlineCreatableList, KnkLogo, LabeledSwitch, LinkCell, MenuCell, Modal, NumberCell, Pagination, SelectableCard, Sidebar, SidebarSection2 as SidebarSection, SlugCell, StatusBadgeCell, Stepper, StepperCompleted, StepperContainer, StepperContent, StepperIcon, StepperProvider, StepperSeparator, StepperStep, StepperStepTitle, StepperSteps, SwitchCell, CardList as Table, CardListData as TableData, CardListItem as TableItem, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineRoot, TimelineSeparator, TimelineTitle, Toolbar, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewRoot, TreeViewTree, TruncatedTextCell, UploadDropZone, UrlCell, Widget, emptyCellValue, formatUserAgent, parseUserAgent, pluralize, truncateText, useSidebarContext, useStep, useStepper, useStepperContext, useStepperNextButton, useStepperPrevButton };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map