@jackbernnie/hiyf 0.2.0 → 0.3.1

package/AGENTS.md

@@ -1,8 +1,8 @@
 # Building UI with `@jackbernnie/hiyf`
 
 > Instructions for AI coding agents (Claude Code, Codex, Cursor, …). This project
-> uses the **hiyf** design system with its **lockdown** lint. Build UI using
-> **only** this system — off-system code fails the build on purpose.
+> uses the **hiyf** AI design protocol (a locked design system) with its **lockdown**
+> lint. Build UI using **only** this system — off-system code fails the build on purpose.
 
 ## The three rules (these fail `npm run build`)
 
@@ -93,7 +93,7 @@ hatch. A few key APIs:
 Full catalog — actions: ButtonGroup, Input, InputGroup, InputOTP, Textarea, Select,
 NativeSelect, Combobox, Checkbox, Switch, Slider, Toggle, ToggleGroup, RadioGroup,
 Label, Field. Feedback/display: Status, Badge, Alert, Card, Progress, Skeleton,
-Spinner, Avatar, Kbd, Empty, Toaster. Layout/data: Separator, AspectRatio,
+Spinner, Avatar, Image, Kbd, Empty, Toaster. Layout/data: Separator, AspectRatio,
 ScrollArea, Table, Carousel, Grid, GridItem. Navigation: Tabs, Accordion,
 Collapsible, Breadcrumb, Pagination, Command, NavigationMenu, Menubar. Overlays:
 Dialog, AlertDialog, Sheet, Drawer, Popover, HoverCard, Tooltip, DropdownMenu,
@@ -118,6 +118,26 @@ import { Home01Icon, Search01Icon } from '@jackbernnie/hiyf/icons'
 `size`: `xs s m l xl`. `color` defaults to `current` (inherits text color, so
 icons inside buttons just work); other values: `muted accent success warning danger`.
 
+## Images
+
+Raw `<img>` fails the build — render images through `<Image>`:
+
+```tsx
+import { Image } from '@jackbernnie/hiyf'
+
+<Image src="/logo.png" alt="Logo" width={120} height={32} radius="m" fit="contain" />
+```
+
+`radius`: `none s m l xl full`. `fit`: `cover contain fill none`. `alt` is required
+(pass `""` for purely decorative images).
+
+## A note on `<Box>` vs `<Text>` className
+
+`<Box>` accepts `className` for standard utility classes (`flex`, `items-center`).
+`<Text>` does NOT — it is closed; a `className` on it is dropped and the lint flags
+it. Put layout on a `<Box>` wrapper; use Text props (`variant`, `color`, `align`,
+`truncate`, `monospace`) for everything else.
+
 ## When something you need doesn't exist
 
 Work through this in order. **Don't get stuck, and don't expand the design system

package/README.md

@@ -1,8 +1,8 @@
 # @jackbernnie/hiyf
 
-**human-in-your-face** — a personal, LLM-safe design system: the full shadcn/ui
-component set as a robust base, themed neutral, and closed down so the only
-expressible choices are correct ones.
+**human-in-your-face** — an AI design protocol (a locked, LLM-safe design system):
+the full shadcn/ui component set as a robust base, themed neutral, and closed down
+so the only expressible choices are correct ones.
 
 ```bash
 npm install @jackbernnie/hiyf

package/dist/components/Image.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Image — the closed, sanctioned way to render an image asset.
+ *
+ * Raw <img> fails the lockdown lint (it is an off-system escape hatch). This is
+ * its one home: every image on screen goes through here. There is no
+ * className/style escape hatch — size with width/height, shape with radius,
+ * control object-fit with fit.
+ */
+declare const RADIUS: {
+    readonly none: "rounded-none";
+    readonly s: "rounded-sm";
+    readonly m: "rounded-md";
+    readonly l: "rounded-lg";
+    readonly xl: "rounded-xl";
+    readonly full: "rounded-full";
+};
+declare const FIT: {
+    readonly cover: "object-cover";
+    readonly contain: "object-contain";
+    readonly fill: "object-fill";
+    readonly none: "object-none";
+};
+export type ImageRadius = keyof typeof RADIUS;
+export type ImageFit = keyof typeof FIT;
+export type ImageProps = {
+    src: string;
+    /** Always required — describe the image, or pass "" for decorative images. */
+    alt: string;
+    width?: number;
+    height?: number;
+    radius?: ImageRadius;
+    fit?: ImageFit;
+    loading?: 'lazy' | 'eager';
+};
+export declare function Image({ src, alt, width, height, radius, fit, loading, }: ImageProps): import("react").JSX.Element;
+export {};

package/dist/components/Image.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../lib/utils.js';
+
+const RADIUS = {
+  none: "rounded-none",
+  s: "rounded-sm",
+  m: "rounded-md",
+  l: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-full"
+};
+const FIT = {
+  cover: "object-cover",
+  contain: "object-contain",
+  fill: "object-fill",
+  none: "object-none"
+};
+function Image({
+  src,
+  alt,
+  width,
+  height,
+  radius = "none",
+  fit = "cover",
+  loading = "lazy"
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      width,
+      height,
+      loading,
+      className: cn("inline-block max-w-full", RADIUS[radius], FIT[fit])
+    }
+  );
+}
+
+export { Image };

package/dist/components/Sidebar.d.ts

@@ -8,7 +8,8 @@ import * as React from "react";
  *   - items take an `icon`, can be `active`, and may nest `items` to become a
  *     collapsible sub-menu (chevron expands an indented list).
  *   - optional `brand` header (icon + title + subtitle) and `user` footer
- *     (avatar + name + email), both of which also collapse to their icon.
+ *     (avatar + name + email + optional menu), both of which also collapse to
+ *     their icon.
  *   - `children` is the main inset content; it gets a header with the trigger.
  *   - No `className`/`style` escape hatch. Need badges or actions? Add typed
  *     fields to SidebarNavItem here.
@@ -38,10 +39,17 @@ export interface SidebarBrand {
     title: string;
     subtitle?: string;
 }
+export interface SidebarUserMenuItem {
+    label: string;
+    tone?: "default" | "danger";
+    onSelect?: () => void;
+    separatorBefore?: boolean;
+}
 export interface SidebarUser {
     name: string;
     email?: string;
     avatar?: React.ReactNode;
+    menuItems?: SidebarUserMenuItem[];
 }
 export interface SidebarProps {
     groups: SidebarNavGroup[];

package/dist/components/Sidebar.js

@@ -1,7 +1,9 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { SidebarProvider, Sidebar as Sidebar$1, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton } from './ui/sidebar.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { SidebarMenuButton, SidebarProvider, Sidebar as Sidebar$1, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarRail, SidebarInset, SidebarTrigger, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, useSidebar, SidebarFooter } from './ui/sidebar.js';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './ui/collapsible.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuItem } from './ui/dropdown-menu.js';
 import { TooltipProvider } from './ui/tooltip.js';
 
 function Chevron() {
@@ -20,6 +22,25 @@ function Chevron() {
     }
   );
 }
+function ChevronsUpDown() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "ml-auto size-4 shrink-0 text-sidebar-foreground/60",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
+        /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
+      ]
+    }
+  );
+}
 function NavItem({ item }) {
   if (item.items && item.items.length > 0) {
     return /* @__PURE__ */ jsx(
@@ -59,6 +80,45 @@ function NavItem({ item }) {
     }
   ) });
 }
+const UserMenuButton = React.forwardRef(function UserMenuButton2({ user, showChevron, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(SidebarMenuButton, { ref, size: "lg", ...props, children: [
+    user.avatar && /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 overflow-hidden rounded-lg", children: user.avatar }),
+    /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: user.name }),
+      user.email && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-sidebar-foreground/70", children: user.email })
+    ] }),
+    showChevron && /* @__PURE__ */ jsx(ChevronsUpDown, {})
+  ] });
+});
+function UserFooter({ user }) {
+  const { isMobile } = useSidebar();
+  const menuItems = user.menuItems ?? [];
+  if (menuItems.length === 0) {
+    return /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(UserMenuButton, { user }) }) }) });
+  }
+  return /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(UserMenuButton, { user, showChevron: true }) }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        side: isMobile ? "bottom" : "right",
+        align: "end",
+        sideOffset: 4,
+        children: menuItems.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              variant: item.tone === "danger" ? "destructive" : "default",
+              onSelect: item.onSelect,
+              children: item.label
+            }
+          )
+        ] }, index))
+      }
+    )
+  ] }) }) }) });
+}
 function Sidebar({ groups, brand, user, children }) {
   return (
     // The icon-rail tooltips on SidebarMenuButton need a TooltipProvider; this
@@ -76,13 +136,7 @@ function Sidebar({ groups, brand, user, children }) {
           group.label && /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }),
           /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((item) => /* @__PURE__ */ jsx(NavItem, { item }, item.label)) })
         ] }, groupIndex)) }),
-        user && /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, { size: "lg", children: [
-          user.avatar && /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 overflow-hidden rounded-lg", children: user.avatar }),
-          /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: user.name }),
-            user.email && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-sidebar-foreground/70", children: user.email })
-          ] })
-        ] }) }) }) }),
+        user && /* @__PURE__ */ jsx(UserFooter, { user }),
         /* @__PURE__ */ jsx(SidebarRail, {})
       ] }),
       /* @__PURE__ */ jsxs(SidebarInset, { children: [

package/dist/components/Table.d.ts

@@ -6,14 +6,25 @@ import * as React from 'react';
  * apply arbitrary one-off styles and compose rows however they like. This wrapper
  * closes it:
  *   - `columns` is a typed column descriptor array with `key`, `header`, `align`,
- *     and an optional `render` function; no className escapes.
+ *     controlled sort/filter metadata, and an optional `render` function; no
+ *     className escapes.
  *   - `data` is a generic array of row objects; the type parameter `T` flows
  *     through so column keys and render callbacks are fully type-checked.
  *   - `caption` is an optional accessible table caption.
+ *   - sorting, filtering, and row clicks are controlled callbacks only; Table
+ *     never mutates, sorts, or filters `data`.
  *   - NO `className`/`style` escape hatch. Every table on screen is rendered by
  *     the same correct, on-brand structure.
  *   - Need a new alignment or row variant? Add it to the column descriptor here.
  */
+export interface TableFilterOption {
+    value: string;
+    label: string;
+}
+export type TableSort = {
+    key: string;
+    direction: 'asc' | 'desc';
+};
 export interface TableColumn<T> {
     /** Property key on each data row (used as default cell content). */
     key: string;
@@ -21,6 +32,14 @@ export interface TableColumn<T> {
     header: string;
     /** Text alignment for both the header and cells. Defaults to 'left'. */
     align?: 'left' | 'right' | 'center';
+    /** Whether this column exposes controlled sort actions. */
+    sortable?: boolean;
+    /** Controlled filter options. The first option conventionally means no filter/all. */
+    filterOptions?: TableFilterOption[];
+    /** Current controlled filter value for this column. */
+    filterValue?: string;
+    /** Called when a filter option is selected. */
+    onFilterChange?: (value: string) => void;
     /**
      * Optional custom renderer for this column's cell.
      * Receives the full row object and returns a React node.
@@ -34,6 +53,12 @@ export interface TableProps<T> {
     data: T[];
     /** Optional accessible caption rendered below the table. */
     caption?: string;
+    /** Current controlled sort state. */
+    sort?: TableSort;
+    /** Called when a column sort direction is selected. */
+    onSortChange?: (sort: TableSort) => void;
+    /** Called when a non-interactive part of a row is clicked or keyboard-activated. */
+    onRowClick?: (row: T) => void;
 }
 /** Closed generic data table — no className/style. */
-export declare function Table<T extends Record<string, unknown>>({ columns, data, caption, }: TableProps<T>): React.JSX.Element;
+export declare function Table<T extends Record<string, unknown>>({ columns, data, caption, sort, onSortChange, onRowClick, }: TableProps<T>): React.JSX.Element;

package/dist/components/Table.js

@@ -1,21 +1,196 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Table as Table$1, TableCaption, TableHeader, TableRow, TableHead, TableBody, TableCell } from './ui/table.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './ui/dropdown-menu.js';
 
 const ALIGN_CLASS = {
   left: "text-left",
   right: "text-right",
   center: "text-center"
 };
+const HEADER_FLEX_CLASS = {
+  left: "justify-start",
+  right: "justify-end",
+  center: "justify-center"
+};
+function CheckGlyph({ visible }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: visible ? "size-4 shrink-0" : "size-4 shrink-0 opacity-0",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m20 6-11 11-5-5" })
+    }
+  );
+}
+function SortGlyph({ direction }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "size-4 shrink-0",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: direction === "asc" ? /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) : /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function ChevronDownGlyph({ active }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: active ? "size-4 shrink-0" : "size-4 shrink-0 opacity-50 transition-opacity group-hover/header:opacity-100 group-focus-within/header:opacity-100",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function HeaderMenu({
+  column,
+  sort,
+  onSortChange
+}) {
+  const activeSort = sort?.key === column.key ? sort : void 0;
+  const firstFilterValue = column.filterOptions?.[0]?.value;
+  const filterActive = column.filterValue !== void 0 && firstFilterValue !== void 0 && column.filterValue !== firstFilterValue;
+  const active = Boolean(activeSort) || filterActive;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: active ? "inline-flex size-6 items-center justify-center rounded-md text-foreground outline-hidden transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring" : "inline-flex size-6 items-center justify-center rounded-md text-muted-foreground outline-hidden transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+        "aria-label": `${column.header} options`,
+        children: activeSort ? /* @__PURE__ */ jsx(SortGlyph, { direction: activeSort.direction }) : /* @__PURE__ */ jsx(ChevronDownGlyph, { active })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+      column.sortable && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onSelect: () => onSortChange?.({ key: column.key, direction: "asc" }),
+            children: [
+              /* @__PURE__ */ jsx(CheckGlyph, { visible: activeSort?.direction === "asc" }),
+              "Sort ascending"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onSelect: () => onSortChange?.({ key: column.key, direction: "desc" }),
+            children: [
+              /* @__PURE__ */ jsx(CheckGlyph, { visible: activeSort?.direction === "desc" }),
+              "Sort descending"
+            ]
+          }
+        )
+      ] }),
+      column.sortable && column.filterOptions && column.filterOptions.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      column.filterOptions?.map((option) => /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onSelect: () => column.onFilterChange?.(option.value),
+          children: [
+            /* @__PURE__ */ jsx(CheckGlyph, { visible: column.filterValue === option.value }),
+            option.label
+          ]
+        },
+        option.value
+      ))
+    ] })
+  ] });
+}
+function HeaderContent({
+  column,
+  sort,
+  onSortChange
+}) {
+  const hasMenu = column.sortable || column.filterOptions && column.filterOptions.length > 0;
+  if (!hasMenu) {
+    return /* @__PURE__ */ jsx(Fragment, { children: column.header });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-1 ${HEADER_FLEX_CLASS[column.align ?? "left"]}`, children: [
+    /* @__PURE__ */ jsx("span", { children: column.header }),
+    /* @__PURE__ */ jsx(HeaderMenu, { column, sort, onSortChange })
+  ] });
+}
+function rowClickIsFromInteractiveElement(event) {
+  return Boolean(
+    event.target.closest(
+      'button, a, input, textarea, select, [role="menuitem"], [role="checkbox"]'
+    )
+  );
+}
 function Table({
   columns,
   data,
-  caption
+  caption,
+  sort,
+  onSortChange,
+  onRowClick
 }) {
   return /* @__PURE__ */ jsxs(Table$1, { children: [
     caption && /* @__PURE__ */ jsx(TableCaption, { children: caption }),
-    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableHead, { className: ALIGN_CLASS[col.align ?? "left"], children: col.header }, col.key)) }) }),
-    /* @__PURE__ */ jsx(TableBody, { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, { className: ALIGN_CLASS[col.align ?? "left"], children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key)) }, rowIndex)) })
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(
+      TableHead,
+      {
+        className: col.sortable || col.filterOptions && col.filterOptions.length > 0 ? `${ALIGN_CLASS[col.align ?? "left"]} group/header` : ALIGN_CLASS[col.align ?? "left"],
+        children: /* @__PURE__ */ jsx(
+          HeaderContent,
+          {
+            column: col,
+            sort,
+            onSortChange
+          }
+        )
+      },
+      col.key
+    )) }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        className: onRowClick ? "cursor-pointer" : void 0,
+        tabIndex: onRowClick ? 0 : void 0,
+        onClick: onRowClick ? (event) => {
+          if (rowClickIsFromInteractiveElement(event)) {
+            return;
+          }
+          onRowClick(row);
+        } : void 0,
+        onKeyDown: onRowClick ? (event) => {
+          if (event.key !== "Enter" && event.key !== " ") {
+            return;
+          }
+          if (event.target.closest(
+            'button, a, input, textarea, select, [role="menuitem"], [role="checkbox"]'
+          )) {
+            return;
+          }
+          event.preventDefault();
+          onRowClick(row);
+        } : void 0,
+        children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, { className: ALIGN_CLASS[col.align ?? "left"], children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
+      },
+      rowIndex
+    )) })
   ] });
 }
 

package/dist/index.d.ts

@@ -60,6 +60,8 @@ export { Spinner } from './components/Spinner';
 export type { SpinnerProps } from './components/Spinner';
 export { Avatar } from './components/Avatar';
 export type { AvatarProps } from './components/Avatar';
+export { Image } from './components/Image';
+export type { ImageProps, ImageRadius, ImageFit } from './components/Image';
 export { Kbd } from './components/Kbd';
 export type { KbdProps } from './components/Kbd';
 export { Empty } from './components/Empty';
@@ -73,7 +75,7 @@ export type { AspectRatioProps } from './components/AspectRatio';
 export { ScrollArea } from './components/ScrollArea';
 export type { ScrollAreaProps } from './components/ScrollArea';
 export { Table } from './components/Table';
-export type { TableProps, TableColumn } from './components/Table';
+export type { TableProps, TableColumn, TableFilterOption, TableSort } from './components/Table';
 export { Carousel } from './components/Carousel';
 export type { CarouselProps } from './components/Carousel';
 export { Tabs } from './components/Tabs';
@@ -111,7 +113,7 @@ export type { NavigationMenuProps, NavItem } from './components/NavigationMenu';
 export { Menubar } from './components/Menubar';
 export type { MenubarProps, MenuDef, MenubarItemDef } from './components/Menubar';
 export { Sidebar } from './components/Sidebar';
-export type { SidebarProps, SidebarNavGroup, SidebarNavItem, SidebarNavSubItem, SidebarBrand, SidebarUser, } from './components/Sidebar';
+export type { SidebarProps, SidebarNavGroup, SidebarNavItem, SidebarNavSubItem, SidebarBrand, SidebarUser, SidebarUserMenuItem, } from './components/Sidebar';
 export { Resizable } from './components/Resizable';
 export type { ResizableProps } from './components/Resizable';
 export { Chart } from './components/Chart';

package/dist/index.js

@@ -29,6 +29,7 @@ export { Progress } from './components/Progress.js';
 export { Skeleton } from './components/Skeleton.js';
 export { Spinner } from './components/Spinner.js';
 export { Avatar } from './components/Avatar.js';
+export { Image } from './components/Image.js';
 export { Kbd } from './components/Kbd.js';
 export { Empty } from './components/Empty.js';
 export { Toaster } from './components/Toaster.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jackbernnie/hiyf",
-  "version": "0.2.0",
-  "description": "human-in-your-face — a personal, LLM-safe design system. Forked from Polar's Orbit (Apache-2.0).",
+  "version": "0.3.1",
+  "description": "human-in-your-face — an AI design protocol (a locked, LLM-safe design system). Forked from Polar's Orbit (Apache-2.0).",
   "license": "Apache-2.0",
   "type": "module",
   "sideEffects": [