@agent-factory-platform/ui-kit 0.2.0

package/dist/lib/cn.d.ts

@@ -0,0 +1,2 @@
+/** Minimal classname joiner — no clsx dependency for this surface. */
+export declare function cn(...parts: Array<string | false | null | undefined>): string;

package/dist/lib/focus-modality.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Keeps modified pointer activation (for example Shift-click) from being
+ * mistaken for keyboard focus by Chromium. The document attribute is consumed
+ * by the UIKit focus rules; a later non-modifier key restores keyboard rings.
+ */
+export declare function installUiFocusModality(): void;

package/dist/lib/motion.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Shared motion tokens — the project's animation system, the way `index.css`
+ * holds the color tokens. Use these instead of ad-hoc `transition={{…}}` so
+ * motion stays consistent and on-brand: Steep is calm and editorial, so easing
+ * is a smooth ease-out (no bounce / spring overshoot), durations are short.
+ *
+ * `<MotionConfig reducedMotion="user">` (wired in main.tsx) makes every
+ * animation respect the OS "reduce motion" setting automatically.
+ */
+/** Editorial ease-out cubic — the default curve for the whole app. */
+export declare const EASE_OUT: readonly [0.22, 0.61, 0.36, 1];
+export declare const transitions: {
+    /** Sidebar / context-panel expand-collapse. */
+    readonly panel: {
+        duration: number;
+        ease: readonly [0.22, 0.61, 0.36, 1];
+    };
+    /** Mobile drawer slide. */
+    readonly drawer: {
+        duration: number;
+        ease: readonly [0.22, 0.61, 0.36, 1];
+    };
+    /** Scrims, tooltips, small opacity changes. */
+    readonly fade: {
+        duration: number;
+        ease: readonly [0.22, 0.61, 0.36, 1];
+    };
+};
+/** Reusable enter/exit variants. */
+export declare const fadeInOut: {
+    readonly initial: {
+        readonly opacity: 0;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+    };
+};
+/** Bottom sheet slide — mobile drawers/modals pinned to the bottom edge. */
+export declare const bottomSheet: {
+    readonly initial: {
+        readonly y: "100%";
+    };
+    readonly animate: {
+        readonly y: 0;
+    };
+    readonly exit: {
+        readonly y: "100%";
+    };
+};
+/** Centered dialog rise — desktop modal cards. */
+export declare const dialogRise: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: 24;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly y: 24;
+    };
+};

package/dist/lib/viewport.d.ts

@@ -0,0 +1,19 @@
+import type { TargetAndTransition, Transition } from "motion/react";
+type MotionVariant = {
+    initial: TargetAndTransition;
+    animate: TargetAndTransition;
+    exit: TargetAndTransition;
+};
+/** Viewport is at or above `minWidthPx` (matches Tailwind custom 560px modal break). */
+export declare function useWideViewport(minWidthPx?: number): boolean;
+export type OverlayMotionPlacement = {
+    container: string;
+    panel: string;
+    motion: MotionVariant;
+    transition: Transition;
+};
+/** Responsive modal: bottom sheet on narrow viewports, centered rise on wide. */
+export declare function responsiveModalPlacement(wide: boolean, panelWide: string): OverlayMotionPlacement;
+/** Responsive drawer: bottom sheet on narrow, right edge on wide (`sm` = 640px). */
+export declare function responsiveDrawerPlacement(wide: boolean, panelWide: string): OverlayMotionPlacement;
+export {};

package/dist/manifest.d.ts

@@ -0,0 +1,17 @@
+export declare const UI_KIT_CATEGORIES: readonly ["foundations", "actions", "forms", "navigation", "feedback", "overlays", "data-display", "workspace", "charts"];
+export type UiKitCategory = (typeof UI_KIT_CATEGORIES)[number];
+export interface UiKitComponentManifestEntry {
+    id: string;
+    name: string;
+    summary: string;
+    category: UiKitCategory;
+    exports: readonly string[];
+    aliases?: readonly string[];
+    status: "stable" | "beta";
+}
+export interface UiKitDeferredComponent {
+    id: string;
+    reason: string;
+}
+export declare const UI_KIT_COMPONENTS: readonly UiKitComponentManifestEntry[];
+export declare const UI_KIT_DEFERRED_COMPONENTS: readonly UiKitDeferredComponent[];

package/dist/manifest.js

@@ -0,0 +1,19 @@
+const e = /* @__PURE__ */ JSON.parse('[{"id":"typography","name":"Typography","summary":"Product headings and locale-aware text hierarchy.","category":"foundations","exports":["Heading","Subheading"],"status":"stable"},{"id":"card","name":"Card","summary":"Border-led surface for one bounded piece of content.","category":"foundations","exports":["Card","CardTitle","CardLabel"],"status":"stable"},{"id":"separator","name":"Separator","summary":"Semantic visual division between adjacent regions.","category":"foundations","exports":["Separator"],"status":"stable"},{"id":"aspect-ratio","name":"Aspect Ratio","summary":"Stable media and visualization proportions.","category":"foundations","exports":["AspectRatio"],"status":"stable"},{"id":"scroll-area","name":"Scroll Area","summary":"Keyboard and pointer accessible contained scrolling.","category":"foundations","exports":["ScrollArea"],"status":"stable"},{"id":"avatar","name":"Avatar","summary":"Image, fallback, status, and grouped identity display.","category":"foundations","exports":["Avatar","AvatarGroup","AvatarGroupOverflow","AvatarBadge","ResourceIcon"],"status":"stable"},{"id":"badge","name":"Badge","summary":"Compact status and category labels.","category":"foundations","exports":["Tag"],"status":"stable"},{"id":"kbd","name":"Kbd","summary":"Keyboard keys and shortcut sequences.","category":"foundations","exports":["Kbd","KbdGroup"],"status":"stable"},{"id":"page-container","name":"Page Container","summary":"Constrained product page content ownership.","category":"foundations","exports":["PageContainer"],"status":"stable"},{"id":"theme-provider","name":"Theme Provider","summary":"Scoped light/dark mode, accent, type scale, and radius configuration.","category":"foundations","exports":["ThemeProvider","ThemeEditor"],"aliases":["theme","appearance"],"status":"stable"},{"id":"button","name":"Button","summary":"Canonical command with compact, default, touch, and icon sizes.","category":"actions","exports":["Button","ActionGroup","Pressable"],"status":"stable"},{"id":"button-group","name":"Button Group","summary":"Connected commands and split actions.","category":"actions","exports":["ButtonGroup"],"status":"stable"},{"id":"toolbar","name":"Toolbar","summary":"Roving-focus command and formatting controls.","category":"actions","exports":["Toolbar","ToolbarButton","ToolbarSeparator","ToolbarToggleGroup","ToolbarToggleItem"],"status":"stable"},{"id":"toggle-group","name":"Toggle Group","summary":"One or more pressed options with keyboard navigation.","category":"actions","exports":["ToggleGroup"],"status":"stable"},{"id":"icon-tip","name":"Icon Tip","summary":"Accessible naming and hover/focus help for icon commands.","category":"actions","exports":["IconTip"],"status":"stable"},{"id":"input","name":"Input","summary":"Single-line text, numeric, and data entry.","category":"forms","exports":["Input","ColorPicker"],"status":"stable"},{"id":"input-group","name":"Input Group","summary":"Input with semantic prefixes, suffixes, and embedded actions.","category":"forms","exports":["InputGroup"],"status":"stable"},{"id":"input-otp","name":"Input OTP","summary":"Paste-friendly segmented one-time-code entry.","category":"forms","exports":["InputOtp"],"aliases":["verification code"],"status":"stable"},{"id":"textarea","name":"Textarea","summary":"Multi-line product text entry.","category":"forms","exports":["Textarea"],"status":"stable"},{"id":"field","name":"Field","summary":"Label, hint, error, required state, and control ownership.","category":"forms","exports":["Field"],"status":"stable"},{"id":"native-select","name":"Native Select","summary":"Platform-native option selection and fallback.","category":"forms","exports":["NativeSelect"],"status":"stable"},{"id":"select","name":"Select","summary":"Styled single-option selection.","category":"forms","exports":["DropdownSelect"],"aliases":["dropdown select"],"status":"stable"},{"id":"combobox","name":"Combobox","summary":"Searchable single-option selection.","category":"forms","exports":["Combobox"],"status":"stable"},{"id":"multi-select","name":"Multi Select","summary":"Persistent checkable option selection.","category":"forms","exports":["MultiSelect"],"status":"stable"},{"id":"checkbox","name":"Checkbox","summary":"Independent binary selection.","category":"forms","exports":["Checkbox"],"status":"stable"},{"id":"radio-group","name":"Radio Group","summary":"Exclusive choice with roving keyboard focus.","category":"forms","exports":["RadioGroup"],"status":"stable"},{"id":"switch","name":"Switch","summary":"Immediate binary setting.","category":"forms","exports":["Switch"],"status":"stable"},{"id":"segmented-control","name":"Segmented Control","summary":"Compact mutually exclusive mode selection.","category":"forms","exports":["SegmentedControl","SegSlider"],"status":"stable"},{"id":"slider","name":"Slider","summary":"Single numeric value across compact and touch densities.","category":"forms","exports":["Slider","AllocationSlider"],"status":"stable"},{"id":"range-slider","name":"Range Slider","summary":"Bounded lower and upper numeric values.","category":"forms","exports":["RangeSlider"],"status":"stable"},{"id":"calendar","name":"Calendar","summary":"Locale-aware date grid and keyboard navigation.","category":"forms","exports":["Calendar"],"status":"stable"},{"id":"date-picker","name":"Date Picker","summary":"Popover date selection using the shared calendar.","category":"forms","exports":["DatePicker"],"status":"stable"},{"id":"date-range-picker","name":"Date Range Picker","summary":"Bounded start and end date selection.","category":"forms","exports":["DateRangePicker"],"status":"stable"},{"id":"time-field","name":"Time Field","summary":"Typed time entry with explicit timezone context.","category":"forms","exports":["TimeField"],"status":"stable"},{"id":"tabs","name":"Tabs","summary":"View navigation with measured active state and keyboard control.","category":"navigation","exports":["SlidingTabs"],"aliases":["sliding tabs"],"status":"stable"},{"id":"breadcrumb","name":"Breadcrumb","summary":"Hierarchical navigation with current-page semantics.","category":"navigation","exports":["Breadcrumb"],"status":"stable"},{"id":"pagination","name":"Pagination","summary":"Bounded page navigation and current-page state.","category":"navigation","exports":["Pagination"],"status":"stable"},{"id":"menu","name":"Menu","summary":"Keyboard accessible command menu.","category":"navigation","exports":["Menu","MenuChoiceGroup","MenuChoiceItem","MenuCommandItem"],"status":"stable"},{"id":"listbox","name":"Listbox","summary":"Composable keyboard-owned result and option collection.","category":"navigation","exports":["Listbox","ListboxOption"],"status":"stable"},{"id":"context-menu","name":"Context Menu","summary":"Pointer and keyboard contextual commands.","category":"navigation","exports":["ContextMenu"],"status":"stable"},{"id":"command-dialog","name":"Command Dialog","summary":"Search-first command palette and result navigation.","category":"navigation","exports":["CommandDialog"],"status":"stable"},{"id":"alert","name":"Alert","summary":"Semantic information, success, warning, and danger feedback.","category":"feedback","exports":["Alert"],"status":"stable"},{"id":"progress","name":"Progress","summary":"Determinate completion and utilization state.","category":"feedback","exports":["Progress"],"status":"stable"},{"id":"spinner","name":"Spinner","summary":"Compact indeterminate loading feedback.","category":"feedback","exports":["Spinner"],"status":"stable"},{"id":"skeleton","name":"Skeleton","summary":"Loading geometry that preserves final layout.","category":"feedback","exports":["Skeleton"],"status":"stable"},{"id":"state-view","name":"State View","summary":"Loading, empty, error, and result state composition.","category":"feedback","exports":["StateView"],"aliases":["empty state"],"status":"stable"},{"id":"toast","name":"Toast","summary":"Deduplicated transient status and error feedback.","category":"feedback","exports":["ToastProvider"],"status":"stable"},{"id":"modal","name":"Modal","summary":"Focus-managed modal dialog and mobile bottom sheet.","category":"overlays","exports":["Modal"],"aliases":["dialog"],"status":"stable"},{"id":"confirm-dialog","name":"Confirm Dialog","summary":"Consequence-focused confirmation for sensitive commands.","category":"overlays","exports":["ConfirmDialog"],"aliases":["alert dialog"],"status":"stable"},{"id":"drawer","name":"Drawer","summary":"Responsive side drawer and mobile bottom sheet.","category":"overlays","exports":["Drawer"],"aliases":["sheet"],"status":"stable"},{"id":"popover","name":"Popover","summary":"Anchored non-modal contextual content.","category":"overlays","exports":["Popover"],"status":"stable"},{"id":"spotlight-tour","name":"Spotlight Tour","summary":"Focus-managed guided tour with a collision-aware target cutout.","category":"overlays","exports":["SpotlightTour"],"status":"stable"},{"id":"hover-tip","name":"Hover Tip","summary":"Hover and focus tooltip content.","category":"overlays","exports":["HoverTip"],"aliases":["tooltip","hover card"],"status":"stable"},{"id":"floating-window","name":"Floating Window","summary":"Draggable, resizable, and pinnable workspace overlay.","category":"overlays","exports":["FloatingWindow"],"status":"stable"},{"id":"data-table","name":"Data Table","summary":"Sortable, resizable, precision-safe tabular data.","category":"data-display","exports":["DataTable"],"status":"stable"},{"id":"table","name":"Table","summary":"Semantic dense table primitives for product-specific data compositions.","category":"data-display","exports":["Table","TableBody","TableCell","TableHead","TableHeader","TableRow"],"status":"stable"},{"id":"item","name":"Item","summary":"Dense list row with media, content, metadata, and action slots.","category":"data-display","exports":["Item","ItemAction","ItemContent","ItemDescription","ItemList","ItemMedia","ItemMeta","ItemTitle"],"status":"stable"},{"id":"tag-pill","name":"Tag Pill","summary":"Structured tag hierarchy and compact collections.","category":"data-display","exports":["TagPill","TagList"],"status":"stable"},{"id":"stat-card","name":"Stat Card","summary":"One bounded metric with context and change state.","category":"data-display","exports":["StatCard"],"status":"stable"},{"id":"stats-table","name":"Stats Table","summary":"Compact key-value metrics.","category":"data-display","exports":["StatsTable"],"status":"stable"},{"id":"accordion","name":"Accordion","summary":"Single disclosure region with accessible state.","category":"data-display","exports":["Accordion"],"status":"stable"},{"id":"collapsible","name":"Collapsible","summary":"Progressive disclosure for secondary controls.","category":"data-display","exports":["Collapsible"],"status":"stable"},{"id":"resizable-pane","name":"Resizable Pane","summary":"Keyboard and pointer resizable workspace split.","category":"workspace","exports":["ResizablePaneGroup"],"status":"stable"},{"id":"workspace-grid","name":"Workspace Grid","summary":"Draggable, resizable, serializable workspace for dense application panels.","category":"workspace","exports":["WorkspaceGrid"],"status":"stable"},{"id":"widget-frame","name":"Widget Frame","summary":"Composable application widget title, tools, status, and body.","category":"workspace","exports":["WidgetFrame"],"status":"stable"},{"id":"widget-picker","name":"Widget Picker","summary":"Searchable module picker for configurable application workspaces.","category":"workspace","exports":["WidgetPicker"],"status":"stable"},{"id":"sidebar","name":"Sidebar","summary":"Persistent navigation and tool ownership rail.","category":"workspace","exports":["Sidebar","SidebarContent","SidebarHeader","SidebarSection"],"status":"stable"},{"id":"scroll-load-more","name":"Scroll Load More","summary":"Observable incremental list loading boundary.","category":"workspace","exports":["ScrollLoadMore"],"status":"stable"},{"id":"chart-frame","name":"Chart Frame","summary":"Shared title, summary, status, toolbar, and chart ownership.","category":"charts","exports":["ChartFrame"],"status":"stable"},{"id":"line-chart","name":"Line Chart","summary":"Token-aligned compact comparison trend.","category":"charts","exports":["LineChart"],"status":"stable"},{"id":"area-chart","name":"Area Chart","summary":"Interactive comparison area chart with axes, grid, tooltip, and semantic fills.","category":"charts","exports":["AreaTrendChart"],"status":"stable"},{"id":"bar-chart","name":"Bar Chart","summary":"Categorical totals and period comparison bars.","category":"charts","exports":["BarChart"],"status":"stable"},{"id":"histogram-chart","name":"Histogram Chart","summary":"Signed distribution and volume buckets around a neutral baseline.","category":"charts","exports":["HistogramChart"],"status":"stable"},{"id":"pie-chart","name":"Pie and Donut Chart","summary":"Categorical allocation with pie and center-labelled donut variants.","category":"charts","exports":["PieChart"],"status":"stable"},{"id":"radar-chart","name":"Radar Chart","summary":"Multi-factor profile comparison.","category":"charts","exports":["RadarChart"],"status":"stable"},{"id":"radial-gauge-chart","name":"Radial Gauge Chart","summary":"Bounded utilization, score, and progress gauge.","category":"charts","exports":["RadialGaugeChart"],"status":"stable"},{"id":"sparkline","name":"Sparkline","summary":"Dense inline trend for table rows and metric tiles.","category":"charts","exports":["Sparkline"],"status":"stable"},{"id":"donut","name":"Donut","summary":"Compact proportional data visualization.","category":"charts","exports":["Donut"],"status":"stable"}]'), t = [{ id: "menubar", reason: "Application commands use the toolbar, command dialog, and contextual menu contracts." }], a = {
+  components: e,
+  deferred: t
+}, s = [
+  "foundations",
+  "actions",
+  "forms",
+  "navigation",
+  "feedback",
+  "overlays",
+  "data-display",
+  "workspace",
+  "charts"
+], o = a.components, r = a.deferred;
+export {
+  s as UI_KIT_CATEGORIES,
+  o as UI_KIT_COMPONENTS,
+  r as UI_KIT_DEFERRED_COMPONENTS
+};

package/dist/styles.d.ts

@@ -0,0 +1 @@
+import "./styles.css";

package/dist/styles.js

@@ -0,0 +1 @@
+

package/dist/theme.d.ts

@@ -0,0 +1,39 @@
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+export type UiThemeMode = "light" | "dark" | "system";
+export type UiThemeShape = "sharp" | "compact" | "soft" | "round";
+export type UiThemeSolidStyle = "color" | "inverse";
+export type UiThemeEffect = "flat" | "plastic";
+export type UiThemeSurface = "filled" | "translucent";
+export type UiThemeDataStyle = "categorical" | "divergent" | "sequential";
+export type UiThemeMotion = "all" | "micro" | "macro" | "none";
+export interface UiThemeSettings {
+    mode: UiThemeMode;
+    brand: `#${string}`;
+    accent: `#${string}`;
+    neutral: `#${string}`;
+    positive: `#${string}`;
+    negative: `#${string}`;
+    warning: `#${string}`;
+    info: `#${string}`;
+    shape: UiThemeShape;
+    solidStyle: UiThemeSolidStyle;
+    effect: UiThemeEffect;
+    surface: UiThemeSurface;
+    dataStyle: UiThemeDataStyle;
+    motion: UiThemeMotion;
+    fontScale: number;
+    radiusScale: number;
+}
+export declare const UI_THEME_DEFAULTS: UiThemeSettings;
+export declare const UI_THEME_BRANDS: readonly ["#e5ad27", "#2e78c1", "#278f82", "#8c42c5", "#c02b86", "#b7680d", "#d43b24", "#bc263e", "#4d8421", "#2e7d5b", "#257d94", "#6752d9"];
+export declare const UI_THEME_ACCENTS: readonly ["#e5ad27", "#2e78c1", "#38a67c", "#7c4dce", "#c02b86", "#b7680d", "#d43b24", "#bc263e", "#4d8421", "#2e7d5b", "#257d94", "#6752d9"];
+export declare const UI_THEME_NEUTRALS: readonly ["#726e68", "#60656f", "#6c686f", "#5f6d69", "#796b69", "#59656b"];
+export declare const UI_THEME_SEMANTICS: readonly ["#38a67c", "#2e7d5b", "#5cc09b", "#bc263e", "#d44b62", "#b7680d", "#2e78c1", "#7c4dce"];
+export declare function normalizeUiThemeSettings(settings: Partial<UiThemeSettings>): UiThemeSettings;
+export declare function uiThemeStyle(settings: Partial<UiThemeSettings>): CSSProperties;
+export declare function applyUiThemeSettings(target: HTMLElement, settings: Partial<UiThemeSettings>): UiThemeSettings;
+export declare function useUiTheme(): UiThemeSettings;
+export declare function ThemeProvider({ settings, className, children, style, ...props }: HTMLAttributes<HTMLDivElement> & {
+    settings: Partial<UiThemeSettings>;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/ui-kit.css

@@ -0,0 +1 @@
+.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;user-select:none}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px;opacity:0}.react-grid-item:hover>.react-resizable-handle{opacity:1}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}@custom-variant dark (&:where(.dark,.dark *,[data-theme="dark"],[data-theme="dark"] *):not(:where([data-theme="light"],[data-theme="light"] *)));@source "./";.af-layer-overlay{z-index:100}.af-layer-blocking{isolation:isolate;z-index:100}.af-layer-tour{isolation:isolate;z-index:110}.af-layer-feedback{z-index:120}.react-grid-item.react-grid-placeholder{border:1px solid var(--color-accent);border-radius:var(--radius-panel);background:color-mix(in srgb,var(--color-accent) 12%,transparent);opacity:1}.react-grid-item{transition:none!important}.react-grid-item>.react-resizable-handle:after{width:6px;height:6px;border-color:var(--color-graphite)}.react-grid-item>.react-resizable-handle{z-index:60;width:28px;height:28px;touch-action:none}.af-workspace-grid-handle{opacity:.32;pointer-events:auto}.af-workspace-grid-handle:hover,.af-workspace-grid-handle:focus-visible,.group\/workspace-grid-item:hover>.af-workspace-grid-handle{opacity:1}@media(hover:none){.af-workspace-grid-handle{opacity:1}}@theme{ --font-scale: 1; --radius-scale: 1; --color-ink: #191613; --color-pure-white: #f7f6f5; --color-fog: #f3f2f1; --color-surface-hover: #e5e3e1; --color-surface-muted: #efedec; --color-ash: #262422; --color-graphite: #726e68; --color-dove: #928d86; --color-slate: #827d76; --color-border: rgba(0, 0, 0, .06); --color-divider: rgba(0, 0, 0, .04); --color-chart-grid: rgba(0, 0, 0, .04); --color-chart-axis: rgba(0, 0, 0, .08); --color-obsidian: #100e0a; --color-rust: #e5ad27; --color-brand: #e5ad27; --color-on-accent: #100e0a; --color-solid: #191613; --color-on-solid: #f7f6f5; --color-apricot-wash: #f5e9cf; --color-sky-wash: #d8e7f6; --color-data-blue: #2e78c1; --color-data-1: #e5ad27; --color-data-2: #2e78c1; --color-data-3: #726e68; --color-data-4: #ffdad0; --color-data-5: #928d86; --color-up: #38a67c; --color-down: #bc263e; --color-level-up-1: #137c96; --color-level-up-2: #135996; --color-level-up-3: #133696; --color-level-up-4: #131396; --color-level-up-5: #361396; --color-level-up-6: #591396; --color-level-down-1: #af1d75; --color-level-down-2: #af1d9c; --color-level-down-3: #9c1daf; --color-level-down-4: #751daf; --color-level-down-5: #4e1daf; --color-level-down-6: #261daf; --color-success: #2e7d5b; --color-danger: #b5462f; --color-warning: #8a5a00; --color-info: #2f6fb4; --color-news: #6d4cc4; --color-news-muted: #eee9fb; --color-chart-event: #b39b00; --color-on-status: #f3f4f6; --color-surface-canvas: #f3f2f1; --color-surface-fog: #f7f6f5; --color-surface-card: #f7f6f5; --color-surface-warm: #f5e9cf; --color-surface-cool: #d8e7f6; --color-surface-ink: #191613; --color-surface-raised: #f7f6f5; --color-chrome: #100e0a; --color-on-chrome: #ffffff; --font-product: "BDO Grotesk", system-ui, sans-serif; --font-data: "BDO Grotesk", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace; --font-product-zh-cn: "BDO Grotesk", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; --font-product-zh-tw: "BDO Grotesk", "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", sans-serif; --font-product-ja: "BDO Grotesk", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", sans-serif; --font-product-ko: "BDO Grotesk", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif; --font-signifier: "BDO Grotesk", system-ui, sans-serif; --font-sohne: "BDO Grotesk", system-ui, sans-serif; --text-micro: calc(10px * var(--font-scale, 1)); --text-micro--line-height: 1.4; --text-micro--letter-spacing: 0; --text-data: calc(11px * var(--font-scale, 1)); --text-data--line-height: 1.4; --text-data--letter-spacing: 0; --text-caption: calc(12px * var(--font-scale, 1)); --text-caption--line-height: 1.333; --text-caption--letter-spacing: 0; --text-body-sm: calc(13px * var(--font-scale, 1)); --text-body-sm--line-height: 1.538; --text-body-sm--letter-spacing: 0; --text-body: calc(14px * var(--font-scale, 1)); --text-body--line-height: 1.429; --text-body--letter-spacing: 0; --text-body-lg: calc(16px * var(--font-scale, 1)); --text-body-lg--line-height: 1.5; --text-body-lg--letter-spacing: 0; --text-subheading: calc(18px * var(--font-scale, 1)); --text-subheading--line-height: 1.556; --text-subheading--letter-spacing: 0; --text-heading-sm: calc(20px * var(--font-scale, 1)); --text-heading-sm--line-height: 1.4; --text-heading-sm--letter-spacing: 0; --text-heading: calc(24px * var(--font-scale, 1)); --text-heading--line-height: 1.333; --text-heading--letter-spacing: 0; --text-heading-lg: calc(30px * var(--font-scale, 1)); --text-heading-lg--line-height: 1.2; --text-heading-lg--letter-spacing: 0; --text-display: calc(36px * var(--font-scale, 1)); --text-display--line-height: 1.111; --text-display--letter-spacing: 0; --font-weight-regular: 400; --font-weight-w430: 430; --font-weight-w450: 450; --font-weight-w480: 480; --font-weight-medium: 500; --font-weight-semibold: 600; --radius-indicator: calc(4px * var(--radius-scale, 1)); --radius-control: calc(4px * var(--radius-scale, 1)); --radius-selection: calc(6px * var(--radius-scale, 1)); --radius-panel: calc(8px * var(--radius-scale, 1)); --radius-overlay: calc(12px * var(--radius-scale, 1)); --radius-sheet: calc(16px * var(--radius-scale, 1)); --shadow-subtle: rgba(17, 19, 28, .17) 0 0 0 1px; --shadow-pop: rgba(17, 19, 28, .1) 0 0 0 1px, rgba(4, 23, 43, .12) 0 12px 32px -10px; --shadow-flow: rgba(4, 23, 43, .05) 0px 0px 0px 1px, rgba(0, 0, 0, .1) 0px 20px 25px -5px, rgba(0, 0, 0, .1) 0px 8px 10px -6px; --shadow-flow-pop: rgba(4, 23, 43, .13) 0px 12px 32px -8px, rgba(4, 23, 43, .09) 0px 4px 12px -4px; --spacing: 4px; --spacing-control-compact: 28px; --spacing-control-default: 36px; --spacing-control-touch: 44px; --spacing-row-compact: 28px; --spacing-row-default: 36px; --spacing-row-touch: 44px; --spacing-slider-track: 4px; --spacing-slider-thumb-compact: 12px; --spacing-slider-thumb-default: 16px; --spacing-overlay-sm: 420px; --spacing-overlay-command: 680px; --spacing-overlay-dashboard: 720px; --spacing-overlay-lg: 820px; --spacing-command-search: 56px; --spacing-command-results: 480px; --spacing-drawer-sm: 380px; --spacing-drawer-md: 460px; --spacing-drawer-lg: 560px; --spacing-drawer-xl: min(860px, 54vw); --spacing-chart-frame-min: 144px; --spacing-preview-mobile: 375px; }.light{--color-ink: #191613;--color-pure-white: #f7f6f5;--color-fog: #f3f2f1;--color-surface-hover: #e5e3e1;--color-surface-muted: #efedec;--color-ash: #262422;--color-graphite: #726e68;--color-dove: #928d86;--color-slate: #827d76;--color-border: rgba(0, 0, 0, .06);--color-divider: rgba(0, 0, 0, .04);--color-chart-grid: rgba(0, 0, 0, .04);--color-chart-axis: rgba(0, 0, 0, .08);--color-obsidian: #100e0a;--color-rust: #e5ad27;--color-brand: #e5ad27;--color-on-accent: #100e0a;--color-solid: #191613;--color-on-solid: #f7f6f5;--color-apricot-wash: #f5e9cf;--color-sky-wash: #d8e7f6;--color-data-blue: #2e78c1;--color-data-1: #e5ad27;--color-data-2: #2e78c1;--color-data-3: #726e68;--color-data-4: #ffdad0;--color-data-5: #928d86;--color-up: #38a67c;--color-down: #bc263e;--color-level-up-1: #137c96;--color-level-up-2: #135996;--color-level-up-3: #133696;--color-level-up-4: #131396;--color-level-up-5: #361396;--color-level-up-6: #591396;--color-level-down-1: #af1d75;--color-level-down-2: #af1d9c;--color-level-down-3: #9c1daf;--color-level-down-4: #751daf;--color-level-down-5: #4e1daf;--color-level-down-6: #261daf;--color-success: #2e7d5b;--color-danger: #b5462f;--color-warning: #8a5a00;--color-info: #2f6fb4;--color-news: #6d4cc4;--color-news-muted: #eee9fb;--color-chart-event: #b39b00;--color-on-status: #f3f4f6;--color-surface-canvas: #f3f2f1;--color-surface-fog: #f7f6f5;--color-surface-card: #f7f6f5;--color-surface-warm: #f5e9cf;--color-surface-cool: #d8e7f6;--color-surface-ink: #191613;--color-surface-raised: #f7f6f5;--color-chrome: #100e0a;--color-on-chrome: #ffffff;--shadow-subtle: rgba(17, 19, 28, .17) 0 0 0 1px;--shadow-pop: rgba(17, 19, 28, .1) 0 0 0 1px, rgba(4, 23, 43, .12) 0 12px 32px -10px;--shadow-flow: rgba(4, 23, 43, .05) 0px 0px 0px 1px, rgba(0, 0, 0, .1) 0px 20px 25px -5px, rgba(0, 0, 0, .1) 0px 8px 10px -6px;--shadow-flow-pop: rgba(4, 23, 43, .13) 0px 12px 32px -8px, rgba(4, 23, 43, .09) 0px 4px 12px -4px;color-scheme:light}html:lang(zh-CN){--font-product: var(--font-product-zh-cn);--font-data: var(--font-product-zh-cn);--font-signifier: var(--font-product-zh-cn);--font-sohne: var(--font-product-zh-cn)}html:lang(zh-TW){--font-product: var(--font-product-zh-tw);--font-data: var(--font-product-zh-tw);--font-signifier: var(--font-product-zh-tw);--font-sohne: var(--font-product-zh-tw)}html:lang(ja){--font-product: var(--font-product-ja);--font-data: var(--font-product-ja);--font-signifier: var(--font-product-ja);--font-sohne: var(--font-product-ja)}html:lang(ko){--font-product: var(--font-product-ko);--font-data: var(--font-product-ko);--font-signifier: var(--font-product-ko);--font-sohne: var(--font-product-ko)}.dark{--color-ink: #ffffff;--color-pure-white: #191613;--color-fog: #191613;--color-surface-hover: #262422;--color-surface-muted: #1d1a18;--color-ash: #d5d1cd;--color-graphite: #928d86;--color-dove: #726e68;--color-slate: #827d76;--color-border: rgba(255, 255, 255, .08);--color-divider: rgba(255, 255, 255, .04);--color-chart-grid: rgba(255, 255, 255, .04);--color-chart-axis: rgba(255, 255, 255, .08);--color-obsidian: #ffffff;--color-rust: #e5ad27;--color-brand: #e5ad27;--color-on-accent: #100e0a;--color-apricot-wash: #3b2b08;--color-sky-wash: #0f2840;--color-data-blue: #5897d7;--color-data-1: #e5ad27;--color-data-2: #5897d7;--color-data-3: #928d86;--color-data-4: #5cc09b;--color-data-5: #d44b62;--color-solid: #ffffff;--color-on-solid: #141210;--color-up: #5cc09b;--color-down: #d44b62;--color-level-up-1: #47c2e1;--color-level-up-2: #4799e1;--color-level-up-3: #4770e1;--color-level-up-4: #4747e1;--color-level-up-5: #7047e1;--color-level-up-6: #9947e1;--color-level-down-1: #e25aac;--color-level-down-2: #e25ad0;--color-level-down-3: #d05ae2;--color-level-down-4: #ac5ae2;--color-level-down-5: #875ae2;--color-level-down-6: #635ae2;--color-success: #2e7d5b;--color-danger: #b5462f;--color-warning: #8a5a00;--color-info: #2f6fb4;--color-news: #9b7bea;--color-news-muted: #2d1a55;--color-chart-event: #f1d600;--color-on-status: #f3f4f6;--color-surface-canvas: #100e0a;--color-surface-fog: #141210;--color-surface-card: #191613;--color-surface-warm: #3b2b08;--color-surface-cool: #0f2840;--color-surface-ink: #ffffff;--color-surface-raised: #191613;--color-chrome: #141210;--color-on-chrome: #ffffff;--shadow-subtle: rgba(255, 255, 255, .17) 0 0 0 1px;--shadow-pop: rgba(255, 255, 255, .1) 0 0 0 1px, rgba(0, 0, 0, .5) 0 16px 40px -12px;--shadow-flow: rgba(255, 255, 255, .06) 0px 0px 0px 1px, rgba(0, 0, 0, .5) 0px 20px 25px -5px, rgba(0, 0, 0, .4) 0px 8px 10px -6px;--shadow-flow-pop: rgba(0, 0, 0, .55) 0px 16px 40px -12px, rgba(0, 0, 0, .45) 0px 6px 16px -6px, rgba(255, 255, 255, .05) 0px 1px 0px 0px inset;color-scheme:dark}[data-surface=translucent]{--color-surface-raised: color-mix(in srgb, var(--color-surface-card) 82%, transparent);--color-surface-fog: color-mix(in srgb, var(--color-surface-card) 72%, transparent)}[data-effect=plastic]{--shadow-subtle: var(--color-border) 0 0 0 1px, color-mix(in srgb, var(--color-ink) 18%, transparent) 0 1px 3px -1px, color-mix(in srgb, var(--color-pure-white) 24%, transparent) 0 1px 0 inset}[data-motion=none] *,[data-motion=none] *:before,[data-motion=none] *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.af-popup-bound{max-width:calc(100vw - var(--spacing) * 4)}.af-theme-editor{container-type:inline-size}.af-theme-field{grid-template-columns:minmax(0,1fr)}@container (min-width: 32rem){.af-theme-field{grid-template-columns:7rem minmax(0,1fr);align-items:center}}.af-color-picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.af-color-picker-hue::-webkit-slider-thumb{width:16px;height:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--color-pure-white);border-radius:999px;background:var(--color-rust);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-ink) 35%,transparent)}.af-color-picker-hue::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--color-pure-white);border-radius:999px;background:var(--color-rust);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-ink) 35%,transparent)}html[data-af-input-modality=pointer] :focus-visible,html[data-af-input-modality=pointer] [data-focus-shell]:has(:focus-visible){outline:none!important;--tw-ring-shadow: 0 0 #0000 !important;--tw-ring-offset-shadow: 0 0 #0000 !important}.recharts-wrapper,.recharts-wrapper:focus,.recharts-wrapper:focus-visible,.recharts-surface,.recharts-surface:focus,.recharts-surface:focus-visible,.recharts-responsive-container:focus,.recharts-responsive-container svg:focus{outline:none!important}:root,.light{--dropdown-open-dur: .25s;--dropdown-pre-scale: .97;--dropdown-ease: cubic-bezier(.22, 1, .36, 1);--stagger-dur: .5s;--stagger-distance: 12px;--stagger-stagger: 40ms;--stagger-blur: 3px;--stagger-ease: cubic-bezier(.22, 1, .36, 1);--tabs-dur: .25s;--tabs-ease: cubic-bezier(.22, 1, .36, 1);--view-dur: .22s;--view-ease: cubic-bezier(.22, 1, .36, 1);--sk-base: #ededee;--sk-hi: #f8f9fa}.dark{--sk-base: #191613;--sk-hi: #262422}.t-shimmer{background:linear-gradient(90deg,var(--sk-base) 25%,var(--sk-hi) 37%,var(--sk-base) 63%);background-size:400% 100%;animation:af-shimmer-move 1.4s ease infinite}@keyframes af-shimmer-move{0%{background-position:100% 0}to{background-position:0 0}}.t-tab-underline{position:absolute;bottom:0;left:0;height:2px;width:0;border-radius:var(--radius-indicator);background:var(--color-rust);transform:translate(0);transition:none;pointer-events:none;will-change:transform,width}.t-tab-underline.is-ready{transition:transform var(--tabs-dur) var(--tabs-ease),width var(--tabs-dur) var(--tabs-ease)}.t-seg-pill{position:absolute;top:var(--spacing);bottom:var(--spacing);left:0;width:0;border-radius:var(--radius-panel);background:var(--color-pure-white);box-shadow:var(--shadow-subtle);transform:translate(0);transition:none;pointer-events:none;z-index:0}.t-seg-pill.is-ready{transition:transform var(--tabs-dur) var(--tabs-ease),width var(--tabs-dur) var(--tabs-ease)}.t-seg-pill-sm{top:calc(var(--spacing) / 2);bottom:calc(var(--spacing) / 2);border-radius:var(--radius-selection)}.t-seg-pill[data-tone=up]{background:color-mix(in srgb,var(--color-up) 22%,var(--color-surface-muted));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-up) 28%,transparent)}.t-seg-pill[data-tone=down]{background:color-mix(in srgb,var(--color-down) 22%,var(--color-surface-muted));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-down) 28%,transparent)}.t-item{animation:af-item-in var(--stagger-dur) var(--stagger-ease) both;will-change:transform,opacity,filter}.af-live-value-up{animation:af-live-value-up 1.2s var(--view-ease, ease-out)}.af-live-value-down{animation:af-live-value-down 1.2s var(--view-ease, ease-out)}@keyframes af-live-value-up{0%,42%{color:var(--color-up);background-color:color-mix(in srgb,var(--color-up) 24%,transparent)}to{color:inherit;background-color:transparent}}@keyframes af-live-value-down{0%,42%{color:var(--color-down);background-color:color-mix(in srgb,var(--color-down) 24%,transparent)}to{color:inherit;background-color:transparent}}@keyframes af-item-in{0%{opacity:0;transform:translateY(var(--stagger-distance));filter:blur(var(--stagger-blur))}to{opacity:1;transform:translateY(0);filter:blur(0)}}@media(prefers-reduced-motion:reduce){.t-tab-underline.is-ready,.t-seg-pill.is-ready{transition:none!important}.t-shimmer,.t-item,.af-live-value-up,.af-live-value-down{animation:none!important}.af-live-value-up{color:var(--color-up)}.af-live-value-down{color:var(--color-down)}}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@agent-factory-platform/ui-kit",
+  "version": "0.2.0",
+  "license": "MIT OR Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JingYeoh/agent-factory.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "files": [
+    "dist",
+    "src/fonts.css",
+    "src/fonts/*.woff2",
+    "src/fonts/*.txt"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "./dist/ui-kit.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/ui-kit.css",
+    "./fonts.css": "./src/fonts.css",
+    "./manifest": {
+      "types": "./dist/manifest.d.ts",
+      "import": "./dist/manifest.js"
+    },
+    "./component-api": {
+      "types": "./dist/component-api.d.ts",
+      "import": "./dist/component-api.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^1.23.0",
+    "motion": "^12.42.0",
+    "radix-ui": "1.6.0",
+    "react-grid-layout": "2.2.3",
+    "recharts": "^3.9.0"
+  },
+  "devDependencies": {
+    "@types/node": "^26.0.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^29.1.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7",
+    "vitest": "^4.1.9"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "lint": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "build": "node ../../scripts/clean-package-dist.mjs . && vite build && tsc -p tsconfig.build.json"
+  }
+}

package/src/fonts/OFL-1.1.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/fonts.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: "BDO Grotesk";
+  src: url("./fonts/BDOGrotesk-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "BDO Grotesk";
+  src: url("./fonts/BDOGrotesk-Medium.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "BDO Grotesk";
+  src: url("./fonts/BDOGrotesk-DemiBold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Geist Mono";
+  src: url("./fonts/GeistMono-Medium.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+}