@devalok/shilp-sutra 0.56.0 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "description": "Devalok Design System — accessible React components, OKLCH design tokens, and Tailwind 4 CSS-first setup. Ships with AI-agent setup recipes.",
   "license": "MIT",
   "author": "Devalok Design & Strategy Studios <shilp-sutra@devalok.in>",
@@ -688,6 +688,11 @@
       "import": "./dist/shell/app-command-palette.js",
       "default": "./dist/shell/app-command-palette.js"
     },
+    "./shell/app-shell": {
+      "types": "./dist/shell/app-shell.d.ts",
+      "import": "./dist/shell/app-shell.js",
+      "default": "./dist/shell/app-shell.js"
+    },
     "./shell/bottom-navbar": {
       "types": "./dist/shell/bottom-navbar.d.ts",
       "import": "./dist/shell/bottom-navbar.js",
@@ -991,7 +996,6 @@
   },
   "devDependencies": {
     "@emoji-mart/data": "^1.2.1",
-    "@emoji-mart/react": "^1.1.1",
     "@floating-ui/dom": "^1.8.0",
     "@floating-ui/react-dom": "^2.1.9",
     "@tabler/icons-react": "^3.45.0",
@@ -1022,7 +1026,6 @@
     "d3-transition": "^3.0.1",
     "date-fns": "^4.4.0",
     "diff": "^9.0.0",
-    "esbuild": "^0.28.1",
     "framer-motion": "^12.42.2",
     "frimousse": "^0.3.0",
     "input-otp": "^1.4.2",

package/skill/SKILL.md

@@ -3,7 +3,7 @@ name: shilp-sutra
 description: Add, configure, and use components from Devalok's shilp-sutra design system (@devalok/shilp-sutra) — a Tailwind 4 + React 19 + CVA library with 110+ accessible components, OKLCH design tokens, framer-motion animations, and per-component RSC-safe entry points. Use this skill whenever the user mentions shilp-sutra, Devalok, the @devalok npm scope, or asks to install/add/style/theme UI in any React project that already depends on the package — even if they don't name it explicitly. Use it instead of generic shadcn/ui, MUI, or Chakra knowledge when shilp-sutra is in the project. Covers Next.js (App + Pages), Vite, Astro, Remix, TanStack Start setup playbooks; component API and variant reference; brand token customization; Server Component import patterns; and a troubleshoot tree for the thirteen most common breakages.
 license: MIT
 metadata:
-  version: "0.56.0"
+  version: "0.57.0"
   author: Devalok Design & Strategy Studios
   homepage: https://github.com/devalok-design/shilp-sutra
   npm: https://www.npmjs.com/package/@devalok/shilp-sutra
@@ -77,15 +77,21 @@ The semantic surface names are the public API. The old numeric names (`surface-1
 | Token                          | Use for                                                                            |
 | ------------------------------ | ---------------------------------------------------------------------------------- |
 | `bg-surface-base`              | Page background                                                                    |
-| `bg-surface-raised`            | Cards, widgets, panels — anything that sits **on** the page                        |
-| `bg-surface-sunken`            | Shell chrome (Sidebar, TopBar), recessed regions                                   |
+| `bg-surface-panel`             | Cards, widgets, panels — anything that sits **on** the page                        |
+| `bg-surface-sunken`            | Wells and recessed regions                                                         |
 | `bg-surface-overlay`           | Dialog, Sheet, Popover, Toast, Combobox menus, any floating overlay                |
-| `bg-surface-raised-hover`      | Hover state on raised surfaces                                                     |
-| `bg-surface-raised-active`     | Active/pressed state on raised surfaces                                            |
+| `bg-surface-panel-hover`       | Hover state on panels                                                              |
+| `bg-surface-panel-active`      | Active/pressed state on panels                                                     |
 | `bg-surface-disabled`          | Disabled surfaces (paired with `text-surface-fg-disabled`)                         |
 | `bg-surface-inverted`          | Inverted surfaces (dark on light themes, light on dark themes)                     |
 
-Putting `bg-surface-base` on a card is a bug — cards belong on `surface-raised`. The pre-publish audit in the DS repo enforces this and blocks the old numeric aliases in component source files.
+Putting `bg-surface-base` on a card is a bug — cards belong on `surface-panel`. The pre-publish audit in the DS repo enforces this and blocks the old numeric aliases in component source files.
+
+**In LIGHT, `base`, `panel` and `overlay` are the same white.** That is deliberate: an edge makes a card a card, not a fill. So **never paint an interaction state with a container value** — `hover:bg-surface-panel` is invisible. Use `bg-surface-panel-hover` / `-panel-active`. This applies to JS conditionals too (`isSelected ? 'bg-surface-panel' : …`), which no lint rule can see.
+
+Borders come in two families: `surface-border-subtle` / `-border` / `-border-strong` are decorative and translucent; `surface-border-interactive` / `-interactive-strong` are solid control edges that carry WCAG 1.4.11. Form controls use the interactive pair.
+
+`surface-raised` was renamed `surface-panel` in 0.57.0 and `surface-chrome` was removed. Old names still resolve; run `pnpm eslint . --fix` to migrate.
 
 ## Adding a component
 

package/skill/references/components.md

@@ -2,7 +2,7 @@
 
 # @devalok/shilp-sutra
 
-> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.56.0.
+> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.57.0.
 > Built on the same primitives as shadcn/ui but with DIFFERENT prop APIs — never guess from shadcn knowledge; verify every prop.
 > This file is a ROUTER: it tells you what exists and where to get details. Do not look for prop tables here — fetch them per component (MCP tool or per-component doc file below).
 
@@ -154,6 +154,7 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 
 ### shell
 - [app-command-palette](docs/components/shell/app-command-palette.md)
+- [app-shell](docs/components/shell/app-shell.md)
 - [bottom-navbar](docs/components/shell/bottom-navbar.md)
 - [command-registry](docs/components/shell/command-registry.md): Exports: CommandRegistryProvider, useCommandRegistry
 - [link-context](docs/components/shell/link-context.md): Exports: LinkProvider, useLink

package/skill/references/setup-astro.md

@@ -41,6 +41,7 @@ Some components ship hard peers as optional. **Install BEFORE first import.**
 | `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
 | `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
 | `@devalok/shilp-sutra/composed/rich-chat-input` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion date-fns` |
+| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
 | `@devalok/shilp-sutra/composed/rich-text-editor` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion` |
 | `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
 | `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |

package/skill/references/setup-next-app-router.md

@@ -54,6 +54,7 @@ Some components depend on third-party libraries that ship as optional peers. **I
 | `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
 | `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
 | `@devalok/shilp-sutra/composed/rich-chat-input` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion date-fns` |
+| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
 | `@devalok/shilp-sutra/composed/rich-text-editor` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion` |
 | `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
 | `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |

package/skill/references/setup-remix.md

@@ -37,6 +37,7 @@ Some components ship hard peers as optional. **Install BEFORE first import.**
 | `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
 | `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
 | `@devalok/shilp-sutra/composed/rich-chat-input` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion date-fns` |
+| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
 | `@devalok/shilp-sutra/composed/rich-text-editor` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion` |
 | `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
 | `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |

package/skill/references/setup-tanstack-start.md

@@ -46,6 +46,7 @@ Some components ship hard peers as optional. **Install BEFORE first import.**
 | `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
 | `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
 | `@devalok/shilp-sutra/composed/rich-chat-input` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion date-fns` |
+| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
 | `@devalok/shilp-sutra/composed/rich-text-editor` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion` |
 | `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
 | `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |

package/skill/references/setup-vite.md

@@ -52,6 +52,7 @@ Some components ship hard peers as optional. **Install BEFORE first import.**
 | `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
 | `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
 | `@devalok/shilp-sutra/composed/rich-chat-input` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion date-fns` |
+| `@devalok/shilp-sutra/composed/diff` | `pnpm add react-syntax-highlighter` |
 | `@devalok/shilp-sutra/composed/rich-text-editor` | `pnpm add @tiptap/core @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-mention @tiptap/extension-text-align @tiptap/extensions @tiptap/markdown @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/suggestion` |
 | `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
 | `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |

package/dist/primitives/react-toast.d.ts

@@ -1,120 +0,0 @@
-import * as _radix_ui_react_context from './_internal/react-context.js';
-import * as React from 'react';
-import * as DismissableLayer from './_internal/react-dismissable-layer.js';
-import { Primitive } from './_internal/react-primitive.js';
-
-type SwipeDirection = 'up' | 'down' | 'left' | 'right';
-declare const createToastScope: _radix_ui_react_context.CreateScope;
-interface ToastProviderProps {
-    children?: React.ReactNode;
-    /**
-     * An author-localized label for each toast. Used to help screen reader users
-     * associate the interruption with a toast.
-     * @defaultValue 'Notification'
-     */
-    label?: string;
-    /**
-     * Time in milliseconds that each toast should remain visible for.
-     * @defaultValue 5000
-     */
-    duration?: number;
-    /**
-     * Direction of pointer swipe that should close the toast.
-     * @defaultValue 'right'
-     */
-    swipeDirection?: SwipeDirection;
-    /**
-     * Distance in pixels that the swipe must pass before a close is triggered.
-     * @defaultValue 50
-     */
-    swipeThreshold?: number;
-}
-declare const ToastProvider: React.FC<ToastProviderProps>;
-type PrimitiveOrderedListProps = React.ComponentPropsWithoutRef<typeof Primitive.ol>;
-interface ToastViewportProps extends PrimitiveOrderedListProps {
-    /**
-     * The keys to use as the keyboard shortcut that will move focus to the toast viewport.
-     * @defaultValue ['F8']
-     */
-    hotkey?: string[];
-    /**
-     * An author-localized label for the toast viewport to provide context for screen reader users
-     * when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.
-     * @defaultValue 'Notifications ({hotkey})'
-     */
-    label?: string;
-}
-declare const ToastViewport: React.ForwardRefExoticComponent<ToastViewportProps & React.RefAttributes<HTMLOListElement>>;
-type ToastElement = ToastImplElement;
-interface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?(open: boolean): void;
-    /**
-     * Used to force mounting when more control is needed. Useful when
-     * controlling animation with React animation libraries.
-     */
-    forceMount?: true;
-}
-declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
-type SwipeEvent = {
-    currentTarget: EventTarget & ToastElement;
-} & Omit<CustomEvent<{
-    originalEvent: React.PointerEvent;
-    delta: {
-        x: number;
-        y: number;
-    };
-}>, 'currentTarget'>;
-type ToastImplElement = React.ComponentRef<typeof Primitive.li>;
-type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer.Root>;
-type ToastImplPrivateProps = {
-    open: boolean;
-    onClose(): void;
-};
-type PrimitiveListItemProps = React.ComponentPropsWithoutRef<typeof Primitive.li>;
-interface ToastImplProps extends ToastImplPrivateProps, PrimitiveListItemProps {
-    type?: 'foreground' | 'background';
-    /**
-     * Time in milliseconds that toast should remain visible for. Overrides value
-     * given to `ToastProvider`.
-     */
-    duration?: number;
-    onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];
-    onPause?(): void;
-    onResume?(): void;
-    onSwipeStart?(event: SwipeEvent): void;
-    onSwipeMove?(event: SwipeEvent): void;
-    onSwipeCancel?(event: SwipeEvent): void;
-    onSwipeEnd?(event: SwipeEvent): void;
-}
-type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
-interface ToastTitleProps extends PrimitiveDivProps {
-}
-declare const ToastTitle: React.ForwardRefExoticComponent<ToastTitleProps & React.RefAttributes<HTMLDivElement>>;
-interface ToastDescriptionProps extends PrimitiveDivProps {
-}
-declare const ToastDescription: React.ForwardRefExoticComponent<ToastDescriptionProps & React.RefAttributes<HTMLDivElement>>;
-interface ToastActionProps extends ToastCloseProps {
-    /**
-     * A short description for an alternate way to carry out the action. For screen reader users
-     * who will not be able to navigate to the button easily/quickly.
-     * @example <ToastAction altText="Goto account settings to upgrade">Upgrade</ToastAction>
-     * @example <ToastAction altText="Undo (Alt+U)">Undo</ToastAction>
-     */
-    altText: string;
-}
-declare const ToastAction: React.ForwardRefExoticComponent<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
-type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
-interface ToastCloseProps extends PrimitiveButtonProps {
-}
-declare const ToastClose: React.ForwardRefExoticComponent<ToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
-declare const Provider: React.FC<ToastProviderProps>;
-declare const Viewport: React.ForwardRefExoticComponent<ToastViewportProps & React.RefAttributes<HTMLOListElement>>;
-declare const Root: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
-declare const Title: React.ForwardRefExoticComponent<ToastTitleProps & React.RefAttributes<HTMLDivElement>>;
-declare const Description: React.ForwardRefExoticComponent<ToastDescriptionProps & React.RefAttributes<HTMLDivElement>>;
-declare const Action: React.ForwardRefExoticComponent<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
-declare const Close: React.ForwardRefExoticComponent<ToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
-
-export { Action, Close, Description, Provider, Root, Title, Toast, ToastAction, type ToastActionProps, ToastClose, type ToastCloseProps, ToastDescription, type ToastDescriptionProps, type ToastProps, ToastProvider, type ToastProviderProps, ToastTitle, type ToastTitleProps, ToastViewport, type ToastViewportProps, Viewport, createToastScope };

package/dist/ui/charts/_internal/scales.d.ts

@@ -1,5 +0,0 @@
-export declare function createLinearScale(domain: [number, number], range: [number, number]): import('d3-scale').ScaleLinear<number, number, never>;
-export declare function createBandScale(domain: string[], range: [number, number], padding?: number): import('d3-scale').ScaleBand<string>;
-export declare function createTimeScale(domain: [Date, Date], range: [number, number]): import('d3-scale').ScaleTime<number, number, never>;
-export declare function createOrdinalScale(domain: string[], colors: string[]): import('d3-scale').ScaleOrdinal<string, string, never>;
-//# sourceMappingURL=scales.d.ts.map

package/dist/ui/charts/_internal/scales.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../../../src/ui/charts/_internal/scales.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,yDAElF;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,SAAM,wCAEvF;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,uDAE5E;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,0DAEpE"}

package/dist/ui/lib/slot.d.ts

@@ -1,8 +0,0 @@
-/**
- * Re-export of Slot from vendored primitives.
- * This provides a public API for the asChild pattern
- * without requiring consumers to reach into primitives/_internal.
- */
-export type { SlotProps } from '../../primitives/react-slot.js';
-export { Slot, Slottable } from '../../primitives/react-slot.js';
-//# sourceMappingURL=slot.d.ts.map

package/dist/ui/lib/slot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../src/ui/lib/slot.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA"}