@exsto/ds 0.0.1-rc.1 → 0.0.1-rc.13

package/dist/ui/src/components/ui/pagination/pagination.d.ts

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 export type TPaginationRangeItem = number | 'ellipsis';
 /**
  * Compute the ordered list of page numbers and ellipsis markers to render.
@@ -7,11 +8,11 @@ export type TPaginationRangeItem = number | 'ellipsis';
 export declare const getPaginationRange: (page: number, count: number, siblingCount?: number) => TPaginationRangeItem[];
 /** Clamp a page number to the valid [1, count] range (count <= 0 yields 1). */
 export declare const clampPage: (page: number, count: number) => number;
-export interface IPaginationProps {
+export interface IPaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'className' | 'children'> {
     page: number;
     count: number;
     onPageChange: (page: number) => void;
     siblingCount?: number;
     className?: string;
 }
-export declare const Pagination: ({ page, count, onPageChange, siblingCount, className }: IPaginationProps) => import('react').JSX.Element;
+export declare const Pagination: ({ page, count, onPageChange, siblingCount, className, ...props }: IPaginationProps) => React.JSX.Element;

package/dist/ui/src/components/ui/popover/popover.d.ts

@@ -2,7 +2,7 @@ import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import type * as React from 'react';
 export declare const Popover: ({ ...props }: PopoverPrimitive.Root.Props) => React.JSX.Element;
 export declare const PopoverTrigger: ({ ...props }: PopoverPrimitive.Trigger.Props) => React.JSX.Element;
-export declare const PopoverContent: ({ className, align, alignOffset, side, sideOffset, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => React.JSX.Element;
+export declare const PopoverContent: ({ className, align, alignOffset, side, sideOffset, anchor, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "anchor" | "side" | "sideOffset">) => React.JSX.Element;
 export declare const PopoverHeader: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
 export declare const PopoverTitle: ({ className, ...props }: PopoverPrimitive.Title.Props) => React.JSX.Element;
 export declare const PopoverDescription: ({ className, ...props }: PopoverPrimitive.Description.Props) => React.JSX.Element;

package/dist/ui/src/components/ui/progress/progress.behavior.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Progress tones: a closed set of theme tokens, never a free class string.
+ *
+ * PATH TAKEN: classes and attributes do not depend on layout, so happy-dom is enough. The
+ * tokens' contrast is measured from the real tokens.css below, and the rendered colours in
+ * the browser by e2e/progress-tone.spec.ts.
+ */
+export {};

package/dist/ui/src/components/ui/progress/progress.d.ts

@@ -1,5 +1,47 @@
 import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import { VariantProps } from 'class-variance-authority';
+/**
+ * The tones: a closed set of semantic colours rather than a class string, so a bar cannot carry a
+ * colour the theme does not define and dark mode and a re-theme keep working. Each is the theme token
+ * the fill uses; the track is a 20% tint of the same token.
+ */
+declare const TONE_TOKEN: {
+    readonly default: "var(--primary)";
+    readonly info: "var(--info)";
+    readonly success: "var(--success)";
+    readonly warning: "var(--warning)";
+    readonly destructive: "var(--destructive)";
+};
+export type TProgressTone = keyof typeof TONE_TOKEN;
+/**
+ * Colours an app can set without a class string. --progress-color replaces the fill (any colour, such as an
+ * app's own status tokens); --progress-track replaces the track, which does not follow the fill: an app
+ * that wants a neutral track sets it to var(--muted). Both are read where the bar is, so they follow the
+ * theme and can be set on :root or on any ancestor.
+ */
+export declare const progressFill: (tone: TProgressTone) => string;
+export declare const progressTrack: (tone: TProgressTone) => string;
+/**
+ * How the fill eases its width. The defaults are the 300ms ease-in-out it always had; an app retunes them
+ * with --progress-duration and --progress-ease, or turns the easing off with `animated={false}` when the
+ * number it shows is itself animated and the bar is driven from the same clock.
+ */
+export declare const PROGRESS_DURATION = "var(--progress-duration, 300ms)";
+export declare const PROGRESS_EASE = "var(--progress-ease, cubic-bezier(0.4, 0, 0.2, 1))";
+declare const progressTrackVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface IProgressProps extends Omit<ProgressPrimitive.Root.Props, 'value'> {
     value?: number | null;
+    /** The bar's colour: a share of a total reads as `warning` when nearly used up, `success` when done. */
+    tone?: TProgressTone;
+    /** 4px (`sm`) or 8px (default) tall. */
+    size?: VariantProps<typeof progressTrackVariants>['size'];
+    /**
+     * Whether the fill eases when `value` changes. Turn it off when the value already moves smoothly
+     * (driven from an animated number's clock), or the bar eases a second time behind it.
+     */
+    animated?: boolean;
 }
-export declare const Progress: ({ value, className, ...props }: IProgressProps) => import('react').JSX.Element;
+export declare const Progress: ({ value, tone, size, animated, className, ...props }: IProgressProps) => import('react').JSX.Element;
+export {};

package/dist/ui/src/components/ui/scroll-area/scroll-area.behavior.test.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Edge-fade wiring and the sizing contract for ScrollArea.
+ *
+ * PATH TAKEN: the fades are cut by a mask in scroll-fade.css, keyed off the
+ * overflow flags Base UI keeps on the root (data-overflow-y-start and friends).
+ * happy-dom has neither layout nor a stylesheet, so what is checked here is the
+ * contract the stylesheet reads: which axis the component declares, and that
+ * nothing of the painted version is left behind. The mask itself, and the flags
+ * flipping at the right moment, are measured in a real browser by
+ * e2e/scroll-area-fade.spec.ts.
+ */
+export {};

package/dist/ui/src/components/ui/scroll-area/scroll-area.d.ts

@@ -1,7 +1,19 @@
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
 import { ComponentProps, RefObject } from 'react';
-/** When the bar shows: 'hover' on area hover or while scrolling (default), 'scroll' only while scrolling, 'always' permanent. */
+/**
+ * When the bar shows: 'hover' on area hover or while scrolling (default),
+ * 'scroll' only while scrolling, 'always' permanent. In every mode the bar is
+ * mounted only while that axis actually overflows, so 'always' means "always
+ * when there is something to scroll", never a bar on a list that fits.
+ */
 export type TScrollbarVisibility = 'hover' | 'scroll' | 'always';
+/**
+ * Surface the edge fades blended into, back when they were painted.
+ *
+ * @deprecated The fades are cut into the content by a mask, so they match any
+ * surface without being told which one. Still accepted, and ignored.
+ */
+export type TScrollAreaFadeFrom = 'card' | 'background' | 'sidebar' | 'popover';
 export interface IScrollBarProps extends ComponentProps<typeof BaseScrollArea.Scrollbar> {
     visibility?: TScrollbarVisibility;
 }
@@ -11,11 +23,37 @@ export interface IScrollAreaProps extends ComponentProps<typeof BaseScrollArea.R
     orientation?: 'horizontal' | 'vertical' | 'both';
     /** Scrollbar reveal behavior (mirrors the Radix ScrollArea `type` prop). */
     type?: TScrollbarVisibility;
-    viewPortId?: string;
+    /** Edge fades hinting at clipped content; each one shows only while its own edge hides something. */
+    fade?: boolean;
+    /**
+     * @deprecated No longer read. The fades mask the content, so they sit correctly
+     * on any surface; passing this does nothing and is safe to delete.
+     */
+    fadeFrom?: TScrollAreaFadeFrom;
+    /** Places both bars, for a host that gives them a gutter of their own (a sidebar menu). */
+    scrollbarClassName?: string;
+    viewportId?: string;
     /** Access to the scrollable viewport (e.g. to reset scroll position on route changes). */
+    viewportRef?: RefObject<HTMLDivElement | null>;
+    viewportClassName?: string;
+    /** Published on the viewport as data-scroll-restoration-id, for a router that restores scroll position. */
+    scrollRestorationId?: string;
+    /**
+     * Whether the viewport is a tab stop of its own (default). Turn it off inside a
+     * widget that already owns focus, a menu above all: its items are the tab
+     * stops, and a focusable wrapper between the role and its items is both
+     * redundant and an aria-required-children violation.
+     */
+    focusable?: boolean;
+    /** @deprecated Use `viewportId`. */
+    viewPortId?: string;
+    /** @deprecated Use `viewportRef`. */
     viewPortRef?: RefObject<HTMLDivElement | null>;
+    /** @deprecated Use `viewportClassName`. */
     viewPortClassName?: string;
+    /** Places the vertical bar only; `scrollbarClassName` covers both. */
     scrollVerticalClassName?: string;
+    /** Places the horizontal bar only; `scrollbarClassName` covers both. */
     scrollHorizontalClassName?: string;
 }
 /**
@@ -24,9 +62,24 @@ export interface IScrollAreaProps extends ComponentProps<typeof BaseScrollArea.R
  * rule: wide/tall content (tables, lists, code) always goes through this, never a bare
  * overflow-* utility.
  *
+ * Cap the height with a plain class on the component itself, e.g.
+ * `<ScrollArea className="max-h-88">`. The viewport picks the cap up through
+ * `max-h-inherit`, which matters because the viewport is the element that actually
+ * scrolls: a cap that lands only on the root leaves tall content spilling out
+ * underneath with no scrollbar, and that reads as a working height right up until the
+ * content outgrows it.
+ *
+ * `fade` fades out each edge that is currently hiding content, rather than always
+ * fading one: a permanent fade is a lie half the time, dimming the last row that fits
+ * and promising more below when the reader is already at the end. It is cut into the
+ * content by a mask (@edyn/theme/scroll-fade.css), so it needs no surface colour and
+ * reads correctly over a tint, a gradient or a glow. A host that keeps something
+ * unscrolled at the top, such as a sticky table header, exempts that band by setting
+ * --scroll-fade-offset on the ScrollArea. The static faded-* utilities in
+ * @edyn/theme/utilities.css are the other tool, for DECORATIVE edges that do not
+ * track scroll position.
+ *
  * The viewport publishes its size as --scroll-area-width/--scroll-area-height CSS vars
- * so children can size against the visible area. Edge fades are NOT built in; apply
- * the faded-* utilities from @edyn/theme/utilities.css on the ScrollArea (it is the
- * positioning root) where a fade is wanted.
+ * so children can size against the visible area.
  */
-export declare const ScrollArea: ({ className, children, orientation, type, viewPortId, viewPortRef, viewPortClassName, scrollVerticalClassName, scrollHorizontalClassName, ...props }: IScrollAreaProps) => import('react').JSX.Element;
+export declare const ScrollArea: ({ className, children, orientation, type, fade, fadeFrom, scrollbarClassName, viewportId, viewportRef, viewportClassName, scrollRestorationId, focusable, viewPortId, viewPortRef, viewPortClassName, scrollVerticalClassName, scrollHorizontalClassName, ...props }: IScrollAreaProps) => import('react').JSX.Element;

package/dist/ui/src/components/ui/separator/separator.behavior.test.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Orientation styling for Separator, and a guard for the bug class behind it.
+ *
+ * Base UI publishes orientation as `data-orientation="horizontal|vertical"`. It
+ * has no `data-horizontal` / `data-vertical` attribute, so a bare
+ * `data-vertical:` variant compiles to a selector that matches nothing: the
+ * component looks styled, and silently is not. A vertical Separator came out
+ * with no width at all that way.
+ *
+ * PATH TAKEN: happy-dom renders no layout, so this asserts the class the
+ * component chose per orientation plus the attribute Base UI emitted, and the
+ * second block greps the package for the dead variant form.
+ */
+export {};

package/dist/ui/src/components/ui/separator/separator.d.ts

@@ -1,2 +1,16 @@
 import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+/**
+ * Hairline rule between content, announced as `role="separator"`.
+ *
+ * The orientation styles are branched in TS rather than written as
+ * `data-[orientation=*]:` variants on purpose. A variant carries two
+ * selectors' worth of specificity, so it would outrank a plain class passed in
+ * by the caller: the sidebar's own `w-auto` lost to `w-full` that way. Branching
+ * emits one plain class per axis, which `cn` can dedupe and a caller can
+ * override.
+ *
+ * Vertical uses `self-stretch` instead of `h-full`: a percentage height needs a
+ * definite parent, and the usual host is an `items-center` row whose height
+ * comes from its content.
+ */
 export declare const Separator: ({ className, orientation, ...props }: SeparatorPrimitive.Props) => import('react').JSX.Element;

package/dist/ui/src/components/ui/table/table.behavior.test.d.ts

@@ -1,10 +1,9 @@
 /**
  * Structure test for the Table primitives.
  *
- * Uses happy-dom (registered by test-setup.ts) and the same React-in-bun-test
- * pattern as packages/dom: render with createRoot + flushSync, then query the
- * real DOM. Guards that the primitives produce a semantic <table> (thead/tbody/
- * th/td/caption) and the shadcn overflow wrapper, so the data-driven edx-table
- * (and the Angular demos that consume it) get a real, accessible table.
+ * Uses happy-dom (registered by test-setup.ts) and the React-in-bun-test
+ * pattern: render with createRoot + flushSync, then query the real DOM. Guards
+ * that the primitives produce a semantic <table> (thead/tbody/th/td/caption) and
+ * the shadcn overflow wrapper, so consumers get a real, accessible table.
  */
 export {};

package/dist/ui/src/components/ui/table/table.d.ts

@@ -1,5 +1,12 @@
 import type * as React from 'react';
-export declare const Table: ({ className, ...props }: React.ComponentProps<"table">) => React.JSX.Element;
+export interface ITableProps extends React.ComponentProps<'table'> {
+    /**
+     * The box around the table, which scrolls it sideways. `overflow-visible` turns that scroll off, for a table whose page or
+     * parent scrolls it, or whose sticky header would otherwise stick to this box instead of that one.
+     */
+    containerClassName?: string;
+}
+export declare const Table: ({ className, containerClassName, ...props }: ITableProps) => React.JSX.Element;
 export declare const TableHeader: ({ className, ...props }: React.ComponentProps<"thead">) => React.JSX.Element;
 export declare const TableBody: ({ className, ...props }: React.ComponentProps<"tbody">) => React.JSX.Element;
 export declare const TableFooter: ({ className, ...props }: React.ComponentProps<"tfoot">) => React.JSX.Element;

package/dist/ui/src/components/ui/tabs/tabs.d.ts

@@ -1,6 +1,7 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import { VariantProps } from 'class-variance-authority';
 import type * as React from 'react';
-export interface ITabsProps {
+export interface ITabsProps extends Omit<BaseTabs.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'className' | 'orientation' | 'children'> {
     /** Controlled selected tab. Provide with `onValueChange`. */
     value?: string;
     /** Uncontrolled initial tab. Use this when the component should own its state. */
@@ -10,26 +11,26 @@ export interface ITabsProps {
     orientation?: 'horizontal' | 'vertical';
     children: React.ReactNode;
 }
-export declare const Tabs: ({ value, defaultValue, onValueChange, className, orientation, children }: ITabsProps) => React.JSX.Element;
+export declare const Tabs: ({ value, defaultValue, onValueChange, className, orientation, children, ...props }: ITabsProps) => React.JSX.Element;
 export declare const tabsListVariants: (props?: ({
     variant?: "default" | "line" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ITabsListProps extends VariantProps<typeof tabsListVariants> {
+export interface ITabsListProps extends VariantProps<typeof tabsListVariants>, Omit<BaseTabs.List.Props, 'className' | 'children'> {
     className?: string;
     children: React.ReactNode;
 }
-export declare const TabsList: ({ className, variant, children }: ITabsListProps) => React.JSX.Element;
-export interface ITabsTriggerProps {
+export declare const TabsList: ({ className, variant, children, ...props }: ITabsListProps) => React.JSX.Element;
+export interface ITabsTriggerProps extends Omit<BaseTabs.Tab.Props, 'value' | 'disabled' | 'className' | 'children'> {
     value: string;
     disabled?: boolean;
     className?: string;
     children: React.ReactNode;
 }
-export declare const TabsTrigger: ({ value, disabled, className, children }: ITabsTriggerProps) => React.JSX.Element;
-export interface ITabsContentProps {
+export declare const TabsTrigger: ({ value, disabled, className, children, ...props }: ITabsTriggerProps) => React.JSX.Element;
+export interface ITabsContentProps extends Omit<BaseTabs.Panel.Props, 'value' | 'keepMounted' | 'className' | 'children'> {
     value: string;
     keepMounted?: boolean;
     className?: string;
     children: React.ReactNode;
 }
-export declare const TabsContent: ({ value, keepMounted, className, children }: ITabsContentProps) => React.JSX.Element;
+export declare const TabsContent: ({ value, keepMounted, className, children, ...props }: ITabsContentProps) => React.JSX.Element;

package/dist/ui/src/index.d.ts

@@ -1,4 +1,10 @@
+export * from './components/edyn/animated-number';
 export * from './components/edyn/audio-player';
+export * from './components/edyn/date-range-picker';
+export * from './components/edyn/initials-avatar';
+export * from './components/edyn/multi-select';
+export * from './components/edyn/progress-line';
+export * from './components/edyn/rich-text-content';
 export * from './components/edyn/video-player';
 export * from './components/ui/accordion';
 export * from './components/ui/alert';

package/dist/ui/src/lib/first-weekday.d.ts

@@ -0,0 +1,6 @@
+export type TWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * The weekday a locale starts its week on, 0 for Sunday to 6 for Saturday, from Intl, so en-GB starts on Monday and en-US on
+ * Sunday with no locale data of our own shipped. A browser without week info gets the region's usual start.
+ */
+export declare const firstWeekdayOf: (locale: string) => TWeekday;

package/dist/ui/src/lib/focus-ring.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The default focus ring must be visible, not just present. WCAG 1.4.11 asks 3:1 for the
+ * parts of a control that show its state, and the ring is drawn outside the control, on
+ * whatever surface it sits on. This reads the real tokens.css, converts OKLCH to sRGB and
+ * measures the default --ring against every surface a control sits on, in both themes.
+ * An app that sets its own --ring (a brand) is outside this: it owns that colour.
+ */
+export {};

package/dist/ui/src/lib/popup-list.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The one look for a list in a popup or a menu: the command palette, Select,
+ * Combobox, MultiSelect and the dropdown menus.
+ *
+ * These lists used to disagree with each other in every detail that shows:
+ * three different radii, two different paddings, a grey fill for the highlight
+ * in one and the accent in another, and the chosen item marked by a check on
+ * the left in Select and on the right in the menus. Picking something from one
+ * list then felt like a different product from picking something in the next.
+ *
+ * It lives here as classes rather than as a stylesheet so a caller's own
+ * className still wins: an unlayered rule would beat every utility, including
+ * the one someone passes for a single list.
+ *
+ * ONE ITEM: transparent at rest, 32px tall, 6px radius (--radius-sm), 6px by
+ * 8px of padding, text-sm, its own icons 16px and muted. Under the pointer or
+ * the keyboard it takes one translucent fill of the text colour, and its icons
+ * the text colour. Chosen is medium weight with a check at the END, never a
+ * fill, so "where I am" and "what I picked" can be told apart at a glance.
+ */
+/**
+ * Which primitive renders the item, because the two disagree about the same
+ * attribute names in a way that silently breaks the styling:
+ *
+ * - cmdk writes `data-selected="false"` and `data-disabled="false"` on items
+ *   that are neither, so a bare `data-selected:` variant matches EVERY item and
+ *   highlights the whole list. Its states have to be matched by value.
+ * - Base UI omits the attribute instead, so presence is the test there. That
+ *   needs the BRACKET form for `selected`: shadcn redefines the bare
+ *   `data-selected:` variant to match only data-selected="true" (for the
+ *   calendar), and Base UI writes it as an empty string, so the bare form
+ *   compiles and silently never applies. `highlighted` and `disabled` have no
+ *   such override, so those stay bare.
+ * - And the same name means different things: cmdk's `data-selected` is the
+ *   keyboard cursor, Base UI's is the chosen value. In cmdk the chosen state is
+ *   `data-checked`, which the DS's own CommandItem sets.
+ */
+export type TPopupItemFlavor = 'base-ui' | 'cmdk';
+/** The shared item look. `checkable` leaves room at the end for the check. */
+export declare const popupItemClass: (flavor?: TPopupItemFlavor, checkable?: boolean) => string;
+/**
+ * The check's slot, at the end of the item and the same size whether or not the
+ * check is in it, so a list does not shift as the choice moves.
+ */
+export declare const POPUP_ITEM_INDICATOR_CLASS = "pointer-events-none absolute right-2 flex size-4 items-center justify-center text-foreground";
+/** A group's heading in any of these lists. */
+export declare const POPUP_GROUP_LABEL_CLASS = "px-2 py-1.5 text-xs font-medium text-muted-foreground";
+/**
+ * How wide a combobox's list is: never narrower than the control it opens from, and as wide as its longest option up to
+ * 28rem or what the window leaves from the control's start (the list is aligned to that start), whichever is less. A
+ * control wider than that cap keeps its own width. Longer options are cut by their item, they do not widen the list.
+ */
+export declare const POPUP_LIST_WIDTH_CLASS = "min-w-(--anchor-width) max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]";

package/dist/ui/src/lib/popup-list.test.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The shared popup list style, and the trap it exists to keep closed.
+ *
+ * PATH TAKEN: the look itself is measured in a real browser across the lists and
+ * both themes (e2e/popup-lists.spec.ts), because computed padding and radius are
+ * the only honest proof of "one look". What is checked here is the part a
+ * stylesheet cannot: that each list takes its item look from one place, and that
+ * the two primitives' disagreeing attribute conventions are matched correctly.
+ */
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.1-rc.1",
-  "description": "The eDynamix design system: React components, design tokens, and optional web components.",
+  "version": "0.0.1-rc.13",
+  "description": "The eDynamix design system: React components and design tokens.",
   "license": "Apache-2.0",
   "keywords": [
     "exsto",
@@ -10,7 +10,6 @@
     "react",
     "components",
     "ui",
-    "web-components",
     "tailwind"
   ],
   "type": "module",
@@ -28,24 +27,50 @@
       "types": "./dist/ds/src/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./elements": {
-      "types": "./dist/ds/src/elements.d.ts",
-      "default": "./dist/elements.js"
+    "./date-picker": {
+      "types": "./dist/ds/src/date-picker.d.ts",
+      "default": "./dist/date-picker.js"
+    },
+    "./rich-text-editor": {
+      "types": "./dist/ds/src/rich-text-editor.d.ts",
+      "default": "./dist/rich-text-editor.js"
     },
     "./styles.css": {
       "types": "./dist/styles.css.d.ts",
       "default": "./dist/styles.css"
     },
+    "./theme.css": {
+      "types": "./dist/theme.css.d.ts",
+      "default": "./dist/theme.css"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "vite build",
+    "prepack": "npm run build && bun run ../../scripts/check-ds-dist.ts",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@base-ui/react": "~1.8.0",
     "@shadcn/react": "^0.3.1",
     "@tabler/icons-react": "^3.44.0",
+    "@tanstack/react-virtual": "^3.13.0",
+    "@tiptap/core": "3.32.2",
+    "@tiptap/extension-bold": "3.32.2",
+    "@tiptap/extension-document": "3.32.2",
+    "@tiptap/extension-hard-break": "3.32.2",
+    "@tiptap/extension-horizontal-rule": "3.32.2",
+    "@tiptap/extension-italic": "3.32.2",
+    "@tiptap/extension-link": "3.32.2",
+    "@tiptap/extension-list": "3.32.2",
+    "@tiptap/extension-mention": "3.32.2",
+    "@tiptap/extension-paragraph": "3.32.2",
+    "@tiptap/extension-text": "3.32.2",
+    "@tiptap/extension-underline": "3.32.2",
+    "@tiptap/extensions": "3.32.2",
+    "@tiptap/pm": "3.32.2",
+    "@tiptap/react": "3.32.2",
+    "@tiptap/suggestion": "3.32.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -62,10 +87,9 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@edyn/dom": "workspace:*",
-    "@edyn/elements": "workspace:*",
     "@edyn/theme": "workspace:*",
     "@edyn/ui": "workspace:*",
+    "@tailwindcss/node": "catalog:",
     "@tailwindcss/vite": "catalog:",
     "@vitejs/plugin-react": "catalog:",
     "vite": "catalog:",