@tea-ui/admin 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 landnevermore
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# @tea-ui/admin
+
+The admin layer: shell, navigation, data display and product states.
+
+Part of [TEA UI](https://landnevermore.github.io/TEAui/) — a design system built once and reused across
+products. The whole system is documented at https://landnevermore.github.io/TEAui/docs/.
+
+## Install
+
+```bash
+npm install @tea-ui/admin
+```
+
+React 18.2 or 19 is expected as a peer dependency.
+
+## Use
+
+```ts
+import { Button } from "@tea-ui/admin";
+```
+
+## Styles
+
+The token layer ships its stylesheet as a separate export, so it is only
+downloaded when it is asked for:
+
+```ts
+import "@tea-ui/admin/styles.css";
+```
+
+## Licence
+
+MIT. See [LICENSE](./LICENSE).

package/dist/data/stat-tile.d.ts

@@ -0,0 +1,66 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { Tone } from '@tea-ui/tokens';
+import { VariantProps } from '@tea-ui/utils';
+export { stateAttributes } from '@tea-ui/core';
+
+/**
+ * TEA UI Admin — the metric tile.
+ *
+ * The audit found **six named stat-tile functions plus four inline variants**
+ * in one product, and **two near-identical 90%-overlapping `StatCard`s** in the
+ * other — including two functions with the *same name* and different props,
+ * which is the exact thing a shared library has to kill. They also disagreed
+ * about whether the value or the label came first.
+ *
+ * The resolution, made once:
+ *  - the **value is the subject**, so the value leads and is the largest type;
+ *  - the label sits above it as an uppercase micro-label, because that is what
+ *    a scanning eye reads first in a row of tiles;
+ *  - colour is a `tone`, never a raw class, and it is never the only signal —
+ *    the tone always comes with a word;
+ *  - a trend is an arrow *and* a signed percentage, so it survives a
+ *    greyscale print and a screen reader.
+ */
+declare const statTileVariants: (props?: ({
+    layout?: "stacked" | "inline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type Trend = "up" | "down" | "flat";
+interface StatTileProps extends React.ComponentProps<"div">, VariantProps<typeof statTileVariants> {
+    /** What is measured. Read as an eyebrow, above the value. */
+    label: string;
+    /** The measurement. A formatted string — formatting is the caller's job. */
+    value: React.ReactNode;
+    /** Secondary text under the value: a unit, a period, a comparison. */
+    hint?: React.ReactNode | undefined;
+    /** Semantic tone of the value. Never a raw colour. */
+    tone?: Tone | undefined;
+    /** Direction of change. An arrow plus a signed number, never colour alone. */
+    trend?: Trend | undefined;
+    /** The change itself, e.g. "+4 %". Required when `trend` is given. */
+    trendValue?: string | undefined;
+    /** Accessible description of the trend, e.g. "steigend gegenüber letzter Woche". */
+    trendDescription?: string | undefined;
+    /** Icon before the label. Decorative. */
+    icon?: React.ReactNode | undefined;
+}
+declare const StatTile: React.ForwardRefExoticComponent<Omit<StatTileProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface MetricCardProps extends StatTileProps {
+    /** A meter under the value, for a bounded resource. */
+    percent?: number | undefined;
+}
+/**
+ * A stat tile with a bounded resource under it. The meter is the third signal
+ * beside the number and the tone, so a value of 87% does not depend on being
+ * read as amber.
+ */
+declare const MetricCard: React.ForwardRefExoticComponent<Omit<MetricCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface StatGridProps extends React.ComponentProps<"div"> {
+    /** Minimum tile width; the grid auto-fits. */
+    minTileWidth?: string | undefined;
+    children: React.ReactNode;
+}
+/** A responsive row of tiles. No per-breakpoint column counts to maintain. */
+declare const StatGrid: React.ForwardRefExoticComponent<Omit<StatGridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { MetricCard, type MetricCardProps, StatGrid, type StatGridProps, StatTile, type StatTileProps, type Trend, statTileVariants };

package/dist/data/stat-tile.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn, cva } from "@tea-ui/utils";
+import { Card, stateAttributes } from "@tea-ui/core";
+const statTileVariants = cva("flex flex-col gap-1 border border-line bg-surface p-4", {
+  variants: {
+    layout: {
+      /** Value first. The default, and the right one for a dashboard. */
+      stacked: "",
+      /** Label and value side by side. For a dense table column. */
+      inline: "flex-row items-baseline justify-between gap-3"
+    }
+  },
+  defaultVariants: { layout: "stacked" }
+});
+const TONE_TEXT = {
+  positive: "text-positive",
+  info: "text-info",
+  caution: "text-caution",
+  critical: "text-critical",
+  neutral: "text-fg"
+};
+const TREND_GLYPH = { up: "\u2191", down: "\u2193", flat: "\u2192" };
+const TREND_WORD = { up: "steigend", down: "fallend", flat: "gleichbleibend" };
+const StatTile = React.forwardRef(function StatTile2({
+  label,
+  value,
+  hint,
+  tone = "neutral",
+  trend,
+  trendValue,
+  trendDescription,
+  icon,
+  layout = "stacked",
+  className,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn(statTileVariants({ layout }), className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-fg-subtle", children: icon }) : null,
+      /* @__PURE__ */ jsx("span", { className: "text-label font-semibold uppercase tracking-widest text-fg-muted", children: label })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("text-display font-semibold leading-none", TONE_TEXT[tone]), children: value }),
+      trend && trendValue ? /* @__PURE__ */ jsxs("span", { className: cn("text-micro", trend === "up" ? "text-positive" : trend === "down" ? "text-critical" : "text-fg-muted"), children: [
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+          TREND_GLYPH[trend],
+          " "
+        ] }),
+        trendValue,
+        /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          " ",
+          "(",
+          trendDescription ?? `${TREND_WORD[trend]} gegen\xFCber dem Vergleichszeitraum`,
+          ")"
+        ] })
+      ] }) : null
+    ] }),
+    hint ? /* @__PURE__ */ jsx("p", { className: "text-micro text-fg-muted", children: hint }) : null
+  ] });
+});
+const MetricCard = React.forwardRef(function MetricCard2({ percent, tone = "neutral", ...props }, ref) {
+  return /* @__PURE__ */ jsxs(Card, { className: "flex flex-col gap-2 p-4", ref, children: [
+    /* @__PURE__ */ jsx(StatTile, { ...props, tone }),
+    typeof percent === "number" ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "meter",
+        "aria-valuenow": Math.round(percent),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": props.label,
+        className: "h-1.5 w-full overflow-hidden rounded-pill bg-surface-3",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("h-full", TONE_TEXT[tone] !== "text-fg" ? "bg-current" : "bg-fg-muted"),
+            style: { width: `${Math.min(100, Math.max(0, percent))}%` }
+          }
+        )
+      }
+    ) : null
+  ] });
+});
+const StatGrid = React.forwardRef(function StatGrid2({ minTileWidth = "12rem", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: { gridTemplateColumns: `repeat(auto-fit, minmax(min(${minTileWidth}, 100%), 1fr))` },
+      className: cn("grid gap-ui", className),
+      ...props,
+      children
+    }
+  );
+});
+export {
+  MetricCard,
+  StatGrid,
+  StatTile,
+  statTileVariants,
+  stateAttributes
+};
+//# sourceMappingURL=stat-tile.js.map

package/dist/data/stat-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data/stat-tile.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Tone } from \"@tea-ui/tokens\";\nimport { cn, cva, type VariantProps } from \"@tea-ui/utils\";\n\nimport { Card, stateAttributes } from \"@tea-ui/core\";\n\n/**\n * TEA UI Admin — the metric tile.\n *\n * The audit found **six named stat-tile functions plus four inline variants**\n * in one product, and **two near-identical 90%-overlapping `StatCard`s** in the\n * other — including two functions with the *same name* and different props,\n * which is the exact thing a shared library has to kill. They also disagreed\n * about whether the value or the label came first.\n *\n * The resolution, made once:\n *  - the **value is the subject**, so the value leads and is the largest type;\n *  - the label sits above it as an uppercase micro-label, because that is what\n *    a scanning eye reads first in a row of tiles;\n *  - colour is a `tone`, never a raw class, and it is never the only signal —\n *    the tone always comes with a word;\n *  - a trend is an arrow *and* a signed percentage, so it survives a\n *    greyscale print and a screen reader.\n */\nexport const statTileVariants = cva(\"flex flex-col gap-1 border border-line bg-surface p-4\", {\n  variants: {\n    layout: {\n      /** Value first. The default, and the right one for a dashboard. */\n      stacked: \"\",\n      /** Label and value side by side. For a dense table column. */\n      inline: \"flex-row items-baseline justify-between gap-3\",\n    },\n  },\n  defaultVariants: { layout: \"stacked\" },\n});\n\nexport type Trend = \"up\" | \"down\" | \"flat\";\n\nexport interface StatTileProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof statTileVariants> {\n  /** What is measured. Read as an eyebrow, above the value. */\n  label: string;\n  /** The measurement. A formatted string — formatting is the caller's job. */\n  value: React.ReactNode;\n  /** Secondary text under the value: a unit, a period, a comparison. */\n  hint?: React.ReactNode | undefined;\n  /** Semantic tone of the value. Never a raw colour. */\n  tone?: Tone | undefined;\n  /** Direction of change. An arrow plus a signed number, never colour alone. */\n  trend?: Trend | undefined;\n  /** The change itself, e.g. \"+4 %\". Required when `trend` is given. */\n  trendValue?: string | undefined;\n  /** Accessible description of the trend, e.g. \"steigend gegenüber letzter Woche\". */\n  trendDescription?: string | undefined;\n  /** Icon before the label. Decorative. */\n  icon?: React.ReactNode | undefined;\n}\n\nconst TONE_TEXT: Record<Tone, string> = {\n  positive: \"text-positive\",\n  info: \"text-info\",\n  caution: \"text-caution\",\n  critical: \"text-critical\",\n  neutral: \"text-fg\",\n};\n\nconst TREND_GLYPH: Record<Trend, string> = { up: \"\\u2191\", down: \"\\u2193\", flat: \"\\u2192\" };\nconst TREND_WORD: Record<Trend, string> = { up: \"steigend\", down: \"fallend\", flat: \"gleichbleibend\" };\n\nexport const StatTile = React.forwardRef<HTMLDivElement, StatTileProps>(function StatTile(\n  {\n    label,\n    value,\n    hint,\n    tone = \"neutral\",\n    trend,\n    trendValue,\n    trendDescription,\n    icon,\n    layout = \"stacked\",\n    className,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <div ref={ref} className={cn(statTileVariants({ layout }), className)} {...props}>\n      <div className=\"flex items-center gap-1.5\">\n        {icon ? (\n          <span aria-hidden=\"true\" className=\"text-fg-subtle\">\n            {icon}\n          </span>\n        ) : null}\n        <span className=\"text-label font-semibold uppercase tracking-widest text-fg-muted\">{label}</span>\n      </div>\n\n      <div className=\"flex items-baseline gap-2\">\n        <span className={cn(\"text-display font-semibold leading-none\", TONE_TEXT[tone])}>{value}</span>\n        {trend && trendValue ? (\n          <span className={cn(\"text-micro\", trend === \"up\" ? \"text-positive\" : trend === \"down\" ? \"text-critical\" : \"text-fg-muted\")}>\n            <span aria-hidden=\"true\">{TREND_GLYPH[trend]} </span>\n            {trendValue}\n            {/* The arrow glyph is decorative; this is the part that carries the\n                meaning when the colour and the shape are unavailable. */}\n            <span className=\"sr-only\">\n              {\" \"}\n              ({trendDescription ?? `${TREND_WORD[trend]} gegenüber dem Vergleichszeitraum`})\n            </span>\n          </span>\n        ) : null}\n      </div>\n\n      {hint ? <p className=\"text-micro text-fg-muted\">{hint}</p> : null}\n    </div>\n  );\n});\n\nexport interface MetricCardProps extends StatTileProps {\n  /** A meter under the value, for a bounded resource. */\n  percent?: number | undefined;\n}\n\n/**\n * A stat tile with a bounded resource under it. The meter is the third signal\n * beside the number and the tone, so a value of 87% does not depend on being\n * read as amber.\n */\nexport const MetricCard = React.forwardRef<HTMLDivElement, MetricCardProps>(function MetricCard(\n  { percent, tone = \"neutral\", ...props },\n  ref,\n) {\n  return (\n    <Card className=\"flex flex-col gap-2 p-4\" ref={ref}>\n      <StatTile {...props} tone={tone} />\n      {typeof percent === \"number\" ? (\n        <div\n          role=\"meter\"\n          aria-valuenow={Math.round(percent)}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-label={props.label}\n          className=\"h-1.5 w-full overflow-hidden rounded-pill bg-surface-3\"\n        >\n          <div\n            className={cn(\"h-full\", TONE_TEXT[tone] !== \"text-fg\" ? \"bg-current\" : \"bg-fg-muted\")}\n            style={{ width: `${Math.min(100, Math.max(0, percent))}%` }}\n          />\n        </div>\n      ) : null}\n    </Card>\n  );\n});\n\n/* -------------------------------------------------------------------------- */\n\nexport interface StatGridProps extends React.ComponentProps<\"div\"> {\n  /** Minimum tile width; the grid auto-fits. */\n  minTileWidth?: string | undefined;\n  children: React.ReactNode;\n}\n\n/** A responsive row of tiles. No per-breakpoint column counts to maintain. */\nexport const StatGrid = React.forwardRef<HTMLDivElement, StatGridProps>(function StatGrid(\n  { minTileWidth = \"12rem\", className, children, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      style={{ gridTemplateColumns: `repeat(auto-fit, minmax(min(${minTileWidth}, 100%), 1fr))` }}\n      className={cn(\"grid gap-ui\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport { stateAttributes };\n"],"mappings":"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","names":["StatTile","MetricCard","StatGrid"]}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { AdminShell, AdminShellProps, NavItem, Page, PageHeader, PageHeaderProps, PageProps } from './shell/index.js';
+export { EmptyState, EmptyStateFiltered, EmptyStateNew, EmptyStateProps, ErrorState, ErrorStateProps, LoadingState, LoadingStateProps, MaintenanceState, NotFoundState, OfflineState, PermissionDeniedState, RefreshingIndicator, ServerErrorState, StateMessageProps } from './states/index.js';
+export { MetricCard, MetricCardProps, StatGrid, StatGridProps, StatTile, StatTileProps, Trend, statTileVariants } from './data/stat-tile.js';
+import 'react';
+import '@tea-ui/ux-standards';
+import 'class-variance-authority/types';
+import '@tea-ui/tokens';
+import '@tea-ui/utils';
+import '@tea-ui/core';

package/dist/index.js

@@ -0,0 +1,41 @@
+import { AdminShell, Page, PageHeader } from "./shell/index.js";
+import {
+  EmptyState,
+  EmptyStateFiltered,
+  EmptyStateNew,
+  ErrorState,
+  LoadingState,
+  MaintenanceState,
+  NotFoundState,
+  OfflineState,
+  PermissionDeniedState,
+  RefreshingIndicator,
+  ServerErrorState
+} from "./states/index.js";
+import {
+  MetricCard,
+  StatGrid,
+  StatTile,
+  statTileVariants
+} from "./data/stat-tile.js";
+export {
+  AdminShell,
+  EmptyState,
+  EmptyStateFiltered,
+  EmptyStateNew,
+  ErrorState,
+  LoadingState,
+  MaintenanceState,
+  MetricCard,
+  NotFoundState,
+  OfflineState,
+  Page,
+  PageHeader,
+  PermissionDeniedState,
+  RefreshingIndicator,
+  ServerErrorState,
+  StatGrid,
+  StatTile,
+  statTileVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * TEA UI Admin.\n *\n * The information-dense layer: an application shell, metric tiles, product\n * states and the data surfaces that a management tool is made of. Where Core\n * is neutral, Admin is optimised for scanning, for keyboard-heavy work, and for\n * showing a lot of state at once without the state competing with itself.\n *\n * Everything here composes Core. Nothing here calls an API or knows what a\n * server is — the domain arrives as props, as a wire value, or as a status key\n * resolved through `@tea-ui/ux-standards`.\n */\nexport { AdminShell, Page, PageHeader, type AdminShellProps, type NavItem, type PageHeaderProps, type PageProps } from \"./shell\";\n\nexport {\n  EmptyState,\n  EmptyStateFiltered,\n  EmptyStateNew,\n  ErrorState,\n  LoadingState,\n  MaintenanceState,\n  NotFoundState,\n  OfflineState,\n  PermissionDeniedState,\n  RefreshingIndicator,\n  ServerErrorState,\n  type EmptyStateProps,\n  type ErrorStateProps,\n  type LoadingStateProps,\n  type StateMessageProps,\n} from \"./states\";\n\nexport {\n  MetricCard,\n  StatGrid,\n  StatTile,\n  statTileVariants,\n  type MetricCardProps,\n  type StatGridProps,\n  type StatTileProps,\n  type Trend,\n} from \"./data/stat-tile\";\n"],"mappings":"AAYA,SAAS,YAAY,MAAM,kBAA4F;AAEvH;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;","names":[]}

package/dist/shell/index.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+/**
+ * TEA UI Admin — the application shell.
+ *
+ * This component decides the information architecture of an admin product, so
+ * the three rules it enforces are worth stating. All three were re-invented
+ * separately in both source products, which is exactly the cost TEA UI exists to
+ * remove.
+ *
+ *  1. **The sidebar collapses below 1024px and becomes a drawer.** Below `lg` a
+ *     256px sidebar stops being information and becomes an obstruction. Both
+ *     source projects collapsed by hand, each with its own drawer and its own
+ *     magic header height.
+ *  2. **There is a skip link, and it is the first focusable thing on the page.**
+ *     Neither source product had one. Without it, a keyboard user tabs through
+ *     the entire navigation on every page.
+ *  3. **The main region has a stable id**, because the skip link's target is an
+ *     anchor, not a scroll hack.
+ */
+interface NavItem {
+    /** Stable key, matched against `activeId`. */
+    id: string;
+    /** The visible label. Say the thing, not "Home". */
+    label: string;
+    /** A router path, when the item is a link. */
+    href?: string | undefined;
+    onSelect?: (() => void) | undefined;
+    icon?: React.ReactNode | undefined;
+    /** A count or short status, rendered after the label. */
+    meta?: React.ReactNode | undefined;
+    /** Group heading, rendered above this item. */
+    group?: string | undefined;
+    disabled?: boolean | undefined;
+}
+interface AdminShellProps extends React.ComponentProps<"div"> {
+    /** Product name, shown in the sidebar header. */
+    product: string;
+    nav: readonly NavItem[];
+    /** Id of the current route. */
+    activeId: string;
+    onNavigate?: ((id: string) => void) | undefined;
+    /** Sidebar footer: a user menu, a version, a logout. */
+    sidebarFooter?: React.ReactNode | undefined;
+    /** Top bar, right of the title. */
+    actions?: React.ReactNode | undefined;
+    /** A live status summary, e.g. "Alle Dienste online". */
+    status?: React.ReactNode | undefined;
+    /** Id of the main region; also the skip link's target. */
+    mainId?: string | undefined;
+    children: React.ReactNode;
+}
+declare function AdminShell({ product, nav, activeId, onNavigate, sidebarFooter, actions, status, mainId, className, children, ...props }: AdminShellProps): React.ReactElement;
+interface PageHeaderProps extends React.ComponentProps<"header"> {
+    title: string;
+    description?: string | undefined;
+    actions?: React.ReactNode | undefined;
+    /** Breadcrumb above the title. */
+    breadcrumb?: React.ReactNode | undefined;
+}
+/** The standard page head: optional breadcrumb, title, description, actions. */
+declare const PageHeader: React.ForwardRefExoticComponent<Omit<PageHeaderProps, "ref"> & React.RefAttributes<HTMLElement>>;
+interface PageProps extends React.ComponentProps<"div"> {
+    children: React.ReactNode;
+}
+/**
+ * The page body. One component, so that "how much padding does a TEA page have"
+ * has exactly one answer — the audit found `p-4`, `p-5` and `p-6` on the same
+ * kind of page inside one product.
+ */
+declare const Page: React.ForwardRefExoticComponent<Omit<PageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { AdminShell, type AdminShellProps, type NavItem, Page, PageHeader, type PageHeaderProps, type PageProps };

package/dist/shell/index.js

@@ -0,0 +1,163 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Menu, X } from "@tea-ui/icons";
+import { cn } from "@tea-ui/utils";
+import { COPY } from "@tea-ui/ux-standards";
+import {
+  Box,
+  Container,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  HStack,
+  IconButton,
+  SkipLink,
+  stateAttributes
+} from "@tea-ui/core";
+function AdminShell({
+  product,
+  nav,
+  activeId,
+  onNavigate,
+  sidebarFooter,
+  actions,
+  status,
+  mainId = "tea-main",
+  className,
+  children,
+  ...props
+}) {
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const select = React.useCallback(
+    (item) => {
+      item.onSelect?.();
+      onNavigate?.(item.id);
+      setDrawerOpen(false);
+    },
+    [onNavigate]
+  );
+  return /* @__PURE__ */ jsxs(Box, { className: cn("min-h-dvh bg-canvas text-fg", className), ...props, children: [
+    /* @__PURE__ */ jsx(SkipLink, { targetId: mainId }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-dvh", children: [
+      /* @__PURE__ */ jsxs("aside", { className: "sticky top-0 hidden h-dvh w-64 shrink-0 flex-col border-e border-line bg-surface lg:flex", children: [
+        /* @__PURE__ */ jsx(SidebarHeader, { product }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx(SidebarNav, { nav, activeId, onSelect: select }) }),
+        sidebarFooter ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-line p-3", children: sidebarFooter }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Drawer, { open: drawerOpen, onOpenChange: setDrawerOpen, children: /* @__PURE__ */ jsxs(DrawerContent, { side: "start", showCloseButton: false, className: "w-72", children: [
+        /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsxs(DrawerTitle, { className: "flex items-center justify-between", children: [
+          product,
+          /* @__PURE__ */ jsx(IconButton, { label: COPY.navigation.closeMenu, variant: "ghost", size: "sm", onClick: () => setDrawerOpen(false), children: /* @__PURE__ */ jsx(X, { size: 16, "aria-hidden": "true" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(DrawerBody, { className: "p-0", children: /* @__PURE__ */ jsx(SidebarNav, { nav, activeId, onSelect: select }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-header flex h-14 shrink-0 items-center gap-3 border-b border-line bg-canvas px-4", children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: COPY.navigation.toggleSidebar,
+              variant: "ghost",
+              size: "sm",
+              className: "lg:hidden",
+              onClick: () => setDrawerOpen(true),
+              children: /* @__PURE__ */ jsx(Menu, { size: 18, "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-ui font-semibold text-fg lg:hidden", children: product }),
+          status ? /* @__PURE__ */ jsx("div", { className: "hidden lg:flex", children: status }) : null,
+          /* @__PURE__ */ jsx(HStack, { gap: "ui", className: "ms-auto", children: actions })
+        ] }),
+        /* @__PURE__ */ jsx("main", { id: mainId, tabIndex: -1, className: "min-w-0 flex-1 focus-visible:outline-none", children })
+      ] })
+    ] })
+  ] });
+}
+function SidebarHeader({ product }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-14 shrink-0 items-center border-b border-line px-4", children: /* @__PURE__ */ jsx("span", { className: "text-ui font-semibold text-fg", children: product }) });
+}
+function SidebarNav({
+  nav,
+  activeId,
+  onSelect
+}) {
+  const groups = React.useMemo(() => groupNav(nav), [nav]);
+  return /* @__PURE__ */ jsx("nav", { "aria-label": COPY.navigation.main, className: "flex flex-col gap-4 p-3", children: groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+    group.label ? /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 text-label font-semibold uppercase tracking-widest text-fg-subtle", children: group.label }) : null,
+    group.items.map((item) => /* @__PURE__ */ jsx(NavLink, { item, active: item.id === activeId, onSelect }, item.id))
+  ] }, group.label || "_ungrouped")) });
+}
+function NavLink({
+  item,
+  active,
+  onSelect
+}) {
+  const className = cn(
+    "flex w-full items-center gap-2 px-3 py-2 text-start text-ui transition-colors",
+    "disabled:pointer-events-none disabled:opacity-50",
+    active ? "bg-accent-subtle font-medium text-accent" : "text-fg-muted hover:bg-surface-3 hover:text-fg"
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0", children: item.icon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+    item.meta ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-micro text-fg-subtle", children: item.meta }) : null
+  ] });
+  const shared = {
+    className,
+    ...active ? { "aria-current": "page" } : {},
+    ...stateAttributes({ disabled: item.disabled, active })
+  };
+  if (item.href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: item.href,
+        onClick: (event) => {
+          if (!item.onSelect) return;
+          event.preventDefault();
+          onSelect(item);
+        },
+        ...shared,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", disabled: item.disabled, onClick: () => onSelect(item), ...shared, children: content });
+}
+function groupNav(nav) {
+  const order = [];
+  const map = /* @__PURE__ */ new Map();
+  for (const item of nav) {
+    const key = item.group ?? "";
+    if (!map.has(key)) {
+      map.set(key, []);
+      order.push(key);
+    }
+    map.get(key).push(item);
+  }
+  return order.map((label) => ({ label, items: map.get(label) ?? [] }));
+}
+const PageHeader = React.forwardRef(function PageHeader2({ title, description, actions, breadcrumb, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("header", { ref, className: cn("flex flex-col gap-3 border-b border-line pb-4", className), ...props, children: [
+    breadcrumb,
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-title font-semibold text-fg", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-micro text-fg-muted", children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ jsx(HStack, { gap: "ui", children: actions }) : null
+    ] }),
+    children
+  ] });
+});
+const Page = React.forwardRef(function Page2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(Container, { size: "full", center: false, className: cn("py-4 md:py-6", className), ref, ...props, children });
+});
+export {
+  AdminShell,
+  Page,
+  PageHeader
+};
+//# sourceMappingURL=index.js.map

package/dist/shell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Menu, X } from \"@tea-ui/icons\";\nimport { cn } from \"@tea-ui/utils\";\nimport { COPY } from \"@tea-ui/ux-standards\";\nimport {\n  Box,\n  Container,\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  HStack,\n  IconButton,\n  SkipLink,\n  stateAttributes,\n} from \"@tea-ui/core\";\n\n/**\n * TEA UI Admin — the application shell.\n *\n * This component decides the information architecture of an admin product, so\n * the three rules it enforces are worth stating. All three were re-invented\n * separately in both source products, which is exactly the cost TEA UI exists to\n * remove.\n *\n *  1. **The sidebar collapses below 1024px and becomes a drawer.** Below `lg` a\n *     256px sidebar stops being information and becomes an obstruction. Both\n *     source projects collapsed by hand, each with its own drawer and its own\n *     magic header height.\n *  2. **There is a skip link, and it is the first focusable thing on the page.**\n *     Neither source product had one. Without it, a keyboard user tabs through\n *     the entire navigation on every page.\n *  3. **The main region has a stable id**, because the skip link's target is an\n *     anchor, not a scroll hack.\n */\nexport interface NavItem {\n  /** Stable key, matched against `activeId`. */\n  id: string;\n  /** The visible label. Say the thing, not \"Home\". */\n  label: string;\n  /** A router path, when the item is a link. */\n  href?: string | undefined;\n  onSelect?: (() => void) | undefined;\n  icon?: React.ReactNode | undefined;\n  /** A count or short status, rendered after the label. */\n  meta?: React.ReactNode | undefined;\n  /** Group heading, rendered above this item. */\n  group?: string | undefined;\n  disabled?: boolean | undefined;\n}\n\nexport interface AdminShellProps extends React.ComponentProps<\"div\"> {\n  /** Product name, shown in the sidebar header. */\n  product: string;\n  nav: readonly NavItem[];\n  /** Id of the current route. */\n  activeId: string;\n  onNavigate?: ((id: string) => void) | undefined;\n  /** Sidebar footer: a user menu, a version, a logout. */\n  sidebarFooter?: React.ReactNode | undefined;\n  /** Top bar, right of the title. */\n  actions?: React.ReactNode | undefined;\n  /** A live status summary, e.g. \"Alle Dienste online\". */\n  status?: React.ReactNode | undefined;\n  /** Id of the main region; also the skip link's target. */\n  mainId?: string | undefined;\n  children: React.ReactNode;\n}\n\nexport function AdminShell({\n  product,\n  nav,\n  activeId,\n  onNavigate,\n  sidebarFooter,\n  actions,\n  status,\n  mainId = \"tea-main\",\n  className,\n  children,\n  ...props\n}: AdminShellProps): React.ReactElement {\n  const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n  // Navigating from the drawer must close it, or the user lands on the new page\n  // still behind an overlay, with focus left behind the scrim.\n  const select = React.useCallback(\n    (item: NavItem) => {\n      item.onSelect?.();\n      onNavigate?.(item.id);\n      setDrawerOpen(false);\n    },\n    [onNavigate],\n  );\n\n  return (\n    <Box className={cn(\"min-h-dvh bg-canvas text-fg\", className)} {...props}>\n      <SkipLink targetId={mainId} />\n      <div className=\"flex min-h-dvh\">\n        <aside className=\"sticky top-0 hidden h-dvh w-64 shrink-0 flex-col border-e border-line bg-surface lg:flex\">\n          <SidebarHeader product={product} />\n          <div className=\"min-h-0 flex-1 overflow-y-auto\">\n            <SidebarNav nav={nav} activeId={activeId} onSelect={select} />\n          </div>\n          {sidebarFooter ? <div className=\"shrink-0 border-t border-line p-3\">{sidebarFooter}</div> : null}\n        </aside>\n\n        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>\n          <DrawerContent side=\"start\" showCloseButton={false} className=\"w-72\">\n            <DrawerHeader>\n              <DrawerTitle className=\"flex items-center justify-between\">\n                {product}\n                <IconButton label={COPY.navigation.closeMenu} variant=\"ghost\" size=\"sm\" onClick={() => setDrawerOpen(false)}>\n                  <X size={16} aria-hidden=\"true\" />\n                </IconButton>\n              </DrawerTitle>\n            </DrawerHeader>\n            <DrawerBody className=\"p-0\">\n              <SidebarNav nav={nav} activeId={activeId} onSelect={select} />\n            </DrawerBody>\n          </DrawerContent>\n        </Drawer>\n\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <header className=\"sticky top-0 z-header flex h-14 shrink-0 items-center gap-3 border-b border-line bg-canvas px-4\">\n            <IconButton\n              label={COPY.navigation.toggleSidebar}\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"lg:hidden\"\n              onClick={() => setDrawerOpen(true)}\n            >\n              <Menu size={18} aria-hidden=\"true\" />\n            </IconButton>\n            <span className=\"truncate text-ui font-semibold text-fg lg:hidden\">{product}</span>\n            {status ? <div className=\"hidden lg:flex\">{status}</div> : null}\n            <HStack gap=\"ui\" className=\"ms-auto\">\n              {actions}\n            </HStack>\n          </header>\n          <main id={mainId} tabIndex={-1} className=\"min-w-0 flex-1 focus-visible:outline-none\">\n            {children}\n          </main>\n        </div>\n      </div>\n    </Box>\n  );\n}\n\nfunction SidebarHeader({ product }: { product: string }): React.ReactElement {\n  return (\n    <div className=\"flex h-14 shrink-0 items-center border-b border-line px-4\">\n      <span className=\"text-ui font-semibold text-fg\">{product}</span>\n    </div>\n  );\n}\n\nfunction SidebarNav({\n  nav,\n  activeId,\n  onSelect,\n}: {\n  nav: readonly NavItem[];\n  activeId: string;\n  onSelect: (item: NavItem) => void;\n}): React.ReactElement {\n  const groups = React.useMemo(() => groupNav(nav), [nav]);\n  return (\n    <nav aria-label={COPY.navigation.main} className=\"flex flex-col gap-4 p-3\">\n      {groups.map((group) => (\n        <div key={group.label || \"_ungrouped\"} className=\"flex flex-col gap-0.5\">\n          {group.label ? (\n            <p className=\"px-2 pb-1 text-label font-semibold uppercase tracking-widest text-fg-subtle\">\n              {group.label}\n            </p>\n          ) : null}\n          {group.items.map((item) => (\n            <NavLink key={item.id} item={item} active={item.id === activeId} onSelect={onSelect} />\n          ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction NavLink({\n  item,\n  active,\n  onSelect,\n}: {\n  item: NavItem;\n  active: boolean;\n  onSelect: (item: NavItem) => void;\n}): React.ReactElement {\n  const className = cn(\n    \"flex w-full items-center gap-2 px-3 py-2 text-start text-ui transition-colors\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    active ? \"bg-accent-subtle font-medium text-accent\" : \"text-fg-muted hover:bg-surface-3 hover:text-fg\",\n  );\n\n  const content = (\n    <>\n      {item.icon ? (\n        <span aria-hidden=\"true\" className=\"shrink-0\">\n          {item.icon}\n        </span>\n      ) : null}\n      <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n      {item.meta ? <span className=\"shrink-0 text-micro text-fg-subtle\">{item.meta}</span> : null}\n    </>\n  );\n\n  // `aria-current` is what makes the position announceable. The background\n  // colour alone is invisible to a screen reader and ambiguous in a greyscale\n  // screenshot — the audit found active items marked by colour alone.\n  const shared = {\n    className,\n    ...(active ? { \"aria-current\": \"page\" as const } : {}),\n    ...stateAttributes({ disabled: item.disabled, active }),\n  };\n\n  if (item.href) {\n    return (\n      <a\n        href={item.href}\n        onClick={(event) => {\n          // Let the browser handle a real href unless the consumer supplied\n          // `onSelect`, in which case the router owns the navigation.\n          if (!item.onSelect) return;\n          event.preventDefault();\n          onSelect(item);\n        }}\n        {...shared}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  return (\n    <button type=\"button\" disabled={item.disabled} onClick={() => onSelect(item)} {...shared}>\n      {content}\n    </button>\n  );\n}\n\n/** Consecutive items sharing a `group` become one labelled block, in order. */\nfunction groupNav(nav: readonly NavItem[]): Array<{ label: string; items: NavItem[] }> {\n  const order: string[] = [];\n  const map = new Map<string, NavItem[]>();\n  for (const item of nav) {\n    const key = item.group ?? \"\";\n    if (!map.has(key)) {\n      map.set(key, []);\n      order.push(key);\n    }\n    map.get(key)!.push(item);\n  }\n  return order.map((label) => ({ label, items: map.get(label) ?? [] }));\n}\n\n/* -------------------------------------------------------------------------- */\n\nexport interface PageHeaderProps extends React.ComponentProps<\"header\"> {\n  title: string;\n  description?: string | undefined;\n  actions?: React.ReactNode | undefined;\n  /** Breadcrumb above the title. */\n  breadcrumb?: React.ReactNode | undefined;\n}\n\n/** The standard page head: optional breadcrumb, title, description, actions. */\nexport const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(function PageHeader(\n  { title, description, actions, breadcrumb, className, children, ...props },\n  ref,\n) {\n  return (\n    <header ref={ref} className={cn(\"flex flex-col gap-3 border-b border-line pb-4\", className)} {...props}>\n      {breadcrumb}\n      <div className=\"flex flex-wrap items-start justify-between gap-3\">\n        <div className=\"min-w-0\">\n          <h1 className=\"text-title font-semibold text-fg\">{title}</h1>\n          {description ? <p className=\"mt-0.5 text-micro text-fg-muted\">{description}</p> : null}\n        </div>\n        {actions ? <HStack gap=\"ui\">{actions}</HStack> : null}\n      </div>\n      {children}\n    </header>\n  );\n});\n\nexport interface PageProps extends React.ComponentProps<\"div\"> {\n  children: React.ReactNode;\n}\n\n/**\n * The page body. One component, so that \"how much padding does a TEA page have\"\n * has exactly one answer — the audit found `p-4`, `p-5` and `p-6` on the same\n * kind of page inside one product.\n */\nexport const Page = React.forwardRef<HTMLDivElement, PageProps>(function Page(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <Container size=\"full\" center={false} className={cn(\"py-4 md:py-6\", className)} ref={ref} {...props}>\n      {children}\n    </Container>\n  );\n});\n"],"mappings":"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","names":["PageHeader","Page"]}

package/dist/states/index.d.ts

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { ErrorAnatomy } from '@tea-ui/ux-standards';
+
+/**
+ * TEA UI Admin — product states.
+ *
+ * The audit found, in one product alone, eight hand-written "Lade …" loaders
+ * (five of them byte-identical), ten empty states, nine error banners and four
+ * visual dialects of each, plus a `Skeleton` component that was fully built and
+ * completely unused. This module is the answer: one implementation per state,
+ * and each one answers the questions its state actually raises.
+ *
+ * Every state here follows the standard's rule — **every meaningful empty state
+ * answers what is empty, why, and what to do next** — and every error follows
+ * the error anatomy: what happened, why, what to do, whether it recovers.
+ */
+interface EmptyStateProps extends React.ComponentProps<"div"> {
+    /** What is empty, named specifically. "Keine Server", not "Keine Einträge". */
+    title: string;
+    /** Why it is empty, when the reason is not obvious. */
+    description?: string | undefined;
+    /** The primary next action, when there is one. */
+    action?: React.ReactNode | undefined;
+    /** A secondary escape hatch, e.g. clearing a filter. */
+    secondaryAction?: React.ReactNode | undefined;
+    icon?: React.ReactNode | undefined;
+    className?: string | undefined;
+}
+/**
+ * A dashed border is used deliberately: it reads as "placeholder", which is
+ * what an empty region is. A solid card would imply content is merely late.
+ */
+declare const EmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** "Nothing has been created yet" — distinct from "your filter matched nothing". */
+declare const EmptyStateNew: React.ForwardRefExoticComponent<Omit<Omit<EmptyStateProps, "title"> & {
+    noun: string;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** "Your filter excluded everything" — the reason is the filter, so say so. */
+declare const EmptyStateFiltered: React.ForwardRefExoticComponent<Omit<Omit<EmptyStateProps, "title" | "description"> & {
+    noun: string;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface LoadingStateProps extends React.ComponentProps<"div"> {
+    /** What is loading, for the announcement. */
+    label: string;
+    /**
+     * Skeleton count. A skeleton that mirrors the real layout beats a spinner
+     * because it reserves the space, so nothing reflows when the data lands.
+     */
+    rows?: number | undefined;
+    className?: string | undefined;
+}
+declare const LoadingState: React.ForwardRefExoticComponent<Omit<LoadingStateProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A *refreshing* indicator: content stays. The audit's clearest performance
+ * defect was replacing the whole region with a centred spinner on every poll, so
+ * a five-second auto-refresh flashed the UI away from content the user was
+ * reading.
+ */
+declare const RefreshingIndicator: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & {
+    label?: string | undefined;
+}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+interface ErrorStateProps extends React.ComponentProps<"div"> {
+    /** A structured error. The component builds the message from it. */
+    error: ErrorAnatomy;
+    /** Retry callback. Only rendered when a retry is a plausible action. */
+    onRetry?: (() => void) | undefined;
+    /** Label for the retry action. */
+    retryLabel?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * An error, rendered as an answer rather than a string.
+ *
+ * The visible text is always "what happened, and why". The recovery action is
+ * only offered when a retry would plausibly succeed — offering it for a
+ * validation error is how people learn that buttons do nothing. The technical
+ * detail is behind a disclosure, because it is for the person filing the
+ * report, not for the person who hit the problem.
+ */
+declare const ErrorState: React.ForwardRefExoticComponent<Omit<ErrorStateProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface StateMessageProps extends React.ComponentProps<"div"> {
+    title?: string | undefined;
+    description?: string | undefined;
+    action?: React.ReactNode | undefined;
+    icon?: React.ReactNode | undefined;
+}
+declare const OfflineState: React.ForwardRefExoticComponent<Omit<StateMessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MaintenanceState: React.ForwardRefExoticComponent<Omit<StateMessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const PermissionDeniedState: React.ForwardRefExoticComponent<Omit<StateMessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const NotFoundState: React.ForwardRefExoticComponent<Omit<StateMessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ServerErrorState: React.ForwardRefExoticComponent<Omit<StateMessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { EmptyState, EmptyStateFiltered, EmptyStateNew, type EmptyStateProps, ErrorState, type ErrorStateProps, LoadingState, type LoadingStateProps, MaintenanceState, NotFoundState, OfflineState, PermissionDeniedState, RefreshingIndicator, ServerErrorState, type StateMessageProps };

package/dist/states/index.js

@@ -0,0 +1,195 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  CircleAlert,
+  CloudOff,
+  Lock,
+  RefreshCw,
+  SearchX,
+  ServerCrash,
+  Wrench
+} from "@tea-ui/icons";
+import { EMPTY_STATE_TITLES, ERROR_TITLES } from "@tea-ui/ux-standards";
+import { cn } from "@tea-ui/utils";
+import { Button, Skeleton, stateAttributes } from "@tea-ui/core";
+const EmptyState = React.forwardRef(function EmptyState2({ title, description, action, secondaryAction, icon, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col items-center gap-3 border border-dashed border-line p-8 text-center",
+        className
+      ),
+      "data-tea-state": "empty",
+      "data-empty": "true",
+      ...stateAttributes({ empty: true }),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-fg-subtle", children: icon }) : null,
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-ui font-medium text-fg", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-micro text-fg-muted", children: description }) : null
+        ] }),
+        action || secondaryAction ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+          action,
+          secondaryAction
+        ] }) : null
+      ]
+    }
+  );
+});
+const EmptyStateNew = React.forwardRef(
+  function EmptyStateNew2({ noun, ...props }, ref) {
+    return /* @__PURE__ */ jsx(EmptyState, { ref, title: `Noch keine ${noun}`, ...props });
+  }
+);
+const EmptyStateFiltered = React.forwardRef(function EmptyStateFiltered2({ noun, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      ref,
+      title: EMPTY_STATE_TITLES.filtered,
+      description: `Keine ${noun} passen zu den aktuellen Filtern.`,
+      icon: /* @__PURE__ */ jsx(SearchX, { size: 20, "aria-hidden": "true" }),
+      ...props
+    }
+  );
+});
+const LoadingState = React.forwardRef(function LoadingState2({ label, rows = 3, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": "true",
+      className: cn("flex flex-col gap-2", className),
+      "data-tea-state": "loading",
+      ...props,
+      children: [
+        Array.from({ length: Math.max(1, rows) }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-9 w-full", index === rows - 1 && "w-2/3") }, index)),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+});
+const RefreshingIndicator = React.forwardRef(function RefreshingIndicator2({ label = "Wird aktualisiert", className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      role: "status",
+      "aria-live": "polite",
+      className: cn("inline-flex items-center gap-1.5 text-micro text-fg-muted", className),
+      "data-tea-state": "refreshing",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(RefreshCw, { size: 12, "aria-hidden": "true", className: "animate-spin", "data-tea-motion": "decorative" }),
+        label
+      ]
+    }
+  );
+});
+const RETRY_LABEL = {
+  automatic: "Erneut versuchen",
+  action: "Erneut versuchen",
+  choice: "Ausw\xE4hlen",
+  none: "Zur\xFCck"
+};
+const ErrorState = React.forwardRef(function ErrorState2({ error, onRetry, retryLabel, className, ...props }, ref) {
+  const showRetry = Boolean(onRetry) && (error.recovery === "action" || error.recovery === "automatic");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: cn("flex flex-col items-center gap-3 border border-critical-border bg-critical-subtle p-6 text-center", className),
+      "data-tea-state": "error",
+      ...stateAttributes({ invalid: true }),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(CircleAlert, { size: 20, "aria-hidden": "true", className: "text-critical" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-ui font-medium text-fg", children: error.title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-micro text-fg-muted", children: error.detail }),
+          error.action ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-micro text-fg", children: error.action }) : null
+        ] }),
+        showRetry ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: retryLabel ?? RETRY_LABEL[error.recovery] }) : null,
+        error.technical ? /* @__PURE__ */ jsxs("details", { className: "w-full text-start", children: [
+          /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-micro text-fg-muted", children: "Technische Details" }),
+          /* @__PURE__ */ jsx("pre", { className: "mt-2 overflow-auto whitespace-pre-wrap border border-line bg-surface-2 p-2 text-left font-mono text-micro text-fg-muted", children: error.technical })
+        ] }) : null,
+        error.reference ? /* @__PURE__ */ jsxs("p", { className: "font-mono text-micro text-fg-subtle", children: [
+          "Referenz: ",
+          error.reference
+        ] }) : null
+      ]
+    }
+  );
+});
+function StateMessage({
+  title,
+  description,
+  action,
+  icon,
+  className,
+  tone = "neutral",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: cn(
+        "flex flex-col items-center gap-3 border p-8 text-center",
+        tone === "caution" ? "border-caution-border bg-caution-subtle" : "border-line",
+        className
+      ),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: tone === "caution" ? "text-caution" : "text-fg-subtle", children: icon }) : null,
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-ui font-medium text-fg", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-micro text-fg-muted", children: description }) : null
+        ] }),
+        action
+      ]
+    }
+  );
+}
+const OfflineState = React.forwardRef(function OfflineState2({ title = "Offline", description = "Es gibt keine Verbindung zum Server. \xC4nderungen werden nicht gespeichert.", ...props }, ref) {
+  return /* @__PURE__ */ jsx(StateMessage, { ref, tone: "caution", title, description, icon: /* @__PURE__ */ jsx(CloudOff, { size: 20, "aria-hidden": "true" }), "data-tea-state": "offline", ...props });
+});
+const MaintenanceState = React.forwardRef(function MaintenanceState2({ title = "Wartungsmodus", description = "Die Anwendung wird gerade gewartet und ist m\xF6glicherweise nicht verf\xFCgbar.", ...props }, ref) {
+  return /* @__PURE__ */ jsx(StateMessage, { ref, title, description, icon: /* @__PURE__ */ jsx(Wrench, { size: 20, "aria-hidden": "true" }), "data-tea-state": "maintenance", ...props });
+});
+const PermissionDeniedState = React.forwardRef(
+  function PermissionDeniedState2({
+    title = ERROR_TITLES.forbidden,
+    description = "F\xFCr diesen Bereich fehlt dir die n\xF6tige Berechtigung. Bitte wende dich an eine Administration.",
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx(StateMessage, { ref, tone: "caution", title, description, icon: /* @__PURE__ */ jsx(Lock, { size: 20, "aria-hidden": "true" }), "data-tea-state": "forbidden", ...props });
+  }
+);
+const NotFoundState = React.forwardRef(function NotFoundState2({ title = ERROR_TITLES.notFound, description = "Diese Seite oder dieser Eintrag existiert nicht.", ...props }, ref) {
+  return /* @__PURE__ */ jsx(StateMessage, { ref, title, description, icon: /* @__PURE__ */ jsx(SearchX, { size: 20, "aria-hidden": "true" }), "data-tea-state": "notFound", ...props });
+});
+const ServerErrorState = React.forwardRef(function ServerErrorState2({ title = ERROR_TITLES.server, description = "Der Server konnte die Anfrage nicht verarbeiten.", ...props }, ref) {
+  return /* @__PURE__ */ jsx(StateMessage, { ref, tone: "caution", title, description, icon: /* @__PURE__ */ jsx(ServerCrash, { size: 20, "aria-hidden": "true" }), "data-tea-state": "error", ...props });
+});
+export {
+  EmptyState,
+  EmptyStateFiltered,
+  EmptyStateNew,
+  ErrorState,
+  LoadingState,
+  MaintenanceState,
+  NotFoundState,
+  OfflineState,
+  PermissionDeniedState,
+  RefreshingIndicator,
+  ServerErrorState
+};
+//# sourceMappingURL=index.js.map

package/dist/states/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/states/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  CircleAlert,\n  CloudOff,\n  Lock,\n  RefreshCw,\n  SearchX,\n  ServerCrash,\n  Wrench,\n} from \"@tea-ui/icons\";\nimport { EMPTY_STATE_TITLES, ERROR_TITLES, type ErrorAnatomy, type ErrorRecovery } from \"@tea-ui/ux-standards\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { Button, Skeleton, stateAttributes } from \"@tea-ui/core\";\n\n/**\n * TEA UI Admin — product states.\n *\n * The audit found, in one product alone, eight hand-written \"Lade …\" loaders\n * (five of them byte-identical), ten empty states, nine error banners and four\n * visual dialects of each, plus a `Skeleton` component that was fully built and\n * completely unused. This module is the answer: one implementation per state,\n * and each one answers the questions its state actually raises.\n *\n * Every state here follows the standard's rule — **every meaningful empty state\n * answers what is empty, why, and what to do next** — and every error follows\n * the error anatomy: what happened, why, what to do, whether it recovers.\n */\n\n/* -------------------------------------------------------------------------- */\n/* Empty                                                                       */\n/* -------------------------------------------------------------------------- */\n\nexport interface EmptyStateProps extends React.ComponentProps<\"div\"> {\n  /** What is empty, named specifically. \"Keine Server\", not \"Keine Einträge\". */\n  title: string;\n  /** Why it is empty, when the reason is not obvious. */\n  description?: string | undefined;\n  /** The primary next action, when there is one. */\n  action?: React.ReactNode | undefined;\n  /** A secondary escape hatch, e.g. clearing a filter. */\n  secondaryAction?: React.ReactNode | undefined;\n  icon?: React.ReactNode | undefined;\n  className?: string | undefined;\n}\n\n/**\n * A dashed border is used deliberately: it reads as \"placeholder\", which is\n * what an empty region is. A solid card would imply content is merely late.\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  { title, description, action, secondaryAction, icon, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex flex-col items-center gap-3 border border-dashed border-line p-8 text-center\",\n        className,\n      )}\n      data-tea-state=\"empty\"\n      data-empty=\"true\"\n      {...stateAttributes({ empty: true })}\n      {...props}\n    >\n      {icon ? (\n        <span aria-hidden=\"true\" className=\"text-fg-subtle\">\n          {icon}\n        </span>\n      ) : null}\n      <div>\n        <p className=\"text-ui font-medium text-fg\">{title}</p>\n        {description ? <p className=\"mt-1 text-micro text-fg-muted\">{description}</p> : null}\n      </div>\n      {action || secondaryAction ? (\n        <div className=\"flex flex-wrap items-center justify-center gap-2\">\n          {action}\n          {secondaryAction}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\n/** \"Nothing has been created yet\" — distinct from \"your filter matched nothing\". */\nexport const EmptyStateNew = React.forwardRef<HTMLDivElement, Omit<EmptyStateProps, \"title\"> & { noun: string }>(\n  function EmptyStateNew({ noun, ...props }, ref) {\n    return <EmptyState ref={ref} title={`Noch keine ${noun}`} {...props} />;\n  },\n);\n\n/** \"Your filter excluded everything\" — the reason is the filter, so say so. */\nexport const EmptyStateFiltered = React.forwardRef<\n  HTMLDivElement,\n  Omit<EmptyStateProps, \"title\" | \"description\"> & { noun: string }\n>(function EmptyStateFiltered({ noun, ...props }, ref) {\n  return (\n    <EmptyState\n      ref={ref}\n      title={EMPTY_STATE_TITLES.filtered}\n      description={`Keine ${noun} passen zu den aktuellen Filtern.`}\n      icon={<SearchX size={20} aria-hidden=\"true\" />}\n      {...props}\n    />\n  );\n});\n\n/* -------------------------------------------------------------------------- */\n/* Loading                                                                     */\n/* -------------------------------------------------------------------------- */\n\nexport interface LoadingStateProps extends React.ComponentProps<\"div\"> {\n  /** What is loading, for the announcement. */\n  label: string;\n  /**\n   * Skeleton count. A skeleton that mirrors the real layout beats a spinner\n   * because it reserves the space, so nothing reflows when the data lands.\n   */\n  rows?: number | undefined;\n  className?: string | undefined;\n}\n\nexport const LoadingState = React.forwardRef<HTMLDivElement, LoadingStateProps>(function LoadingState(\n  { label, rows = 3, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-busy=\"true\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      data-tea-state=\"loading\"\n      {...props}\n    >\n      {Array.from({ length: Math.max(1, rows) }, (_, index) => (\n        <Skeleton key={index} className={cn(\"h-9 w-full\", index === rows - 1 && \"w-2/3\")} />\n      ))}\n      <span className=\"sr-only\">{label}</span>\n    </div>\n  );\n});\n\n/**\n * A *refreshing* indicator: content stays. The audit's clearest performance\n * defect was replacing the whole region with a centred spinner on every poll, so\n * a five-second auto-refresh flashed the UI away from content the user was\n * reading.\n */\nexport const RefreshingIndicator = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentProps<\"span\"> & { label?: string | undefined }\n>(function RefreshingIndicator({ label = \"Wird aktualisiert\", className, ...props }, ref) {\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\"inline-flex items-center gap-1.5 text-micro text-fg-muted\", className)}\n      data-tea-state=\"refreshing\"\n      {...props}\n    >\n      <RefreshCw size={12} aria-hidden=\"true\" className=\"animate-spin\" data-tea-motion=\"decorative\" />\n      {label}\n    </span>\n  );\n});\n\n/* -------------------------------------------------------------------------- */\n/* Error                                                                       */\n/* -------------------------------------------------------------------------- */\n\nexport interface ErrorStateProps extends React.ComponentProps<\"div\"> {\n  /** A structured error. The component builds the message from it. */\n  error: ErrorAnatomy;\n  /** Retry callback. Only rendered when a retry is a plausible action. */\n  onRetry?: (() => void) | undefined;\n  /** Label for the retry action. */\n  retryLabel?: string | undefined;\n  className?: string | undefined;\n}\n\nconst RETRY_LABEL: Record<ErrorRecovery, string> = {\n  automatic: \"Erneut versuchen\",\n  action: \"Erneut versuchen\",\n  choice: \"Auswählen\",\n  none: \"Zurück\",\n};\n\n/**\n * An error, rendered as an answer rather than a string.\n *\n * The visible text is always \"what happened, and why\". The recovery action is\n * only offered when a retry would plausibly succeed — offering it for a\n * validation error is how people learn that buttons do nothing. The technical\n * detail is behind a disclosure, because it is for the person filing the\n * report, not for the person who hit the problem.\n */\nexport const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(function ErrorState(\n  { error, onRetry, retryLabel, className, ...props },\n  ref,\n) {\n  const showRetry = Boolean(onRetry) && (error.recovery === \"action\" || error.recovery === \"automatic\");\n  return (\n    <div\n      ref={ref}\n      role=\"alert\"\n      className={cn(\"flex flex-col items-center gap-3 border border-critical-border bg-critical-subtle p-6 text-center\", className)}\n      data-tea-state=\"error\"\n      {...stateAttributes({ invalid: true })}\n      {...props}\n    >\n      <CircleAlert size={20} aria-hidden=\"true\" className=\"text-critical\" />\n      <div>\n        <p className=\"text-ui font-medium text-fg\">{error.title}</p>\n        <p className=\"mt-1 text-micro text-fg-muted\">{error.detail}</p>\n        {error.action ? <p className=\"mt-2 text-micro text-fg\">{error.action}</p> : null}\n      </div>\n      {showRetry ? (\n        <Button variant=\"outline\" size=\"sm\" onClick={onRetry}>\n          {retryLabel ?? RETRY_LABEL[error.recovery]}\n        </Button>\n      ) : null}\n      {error.technical ? (\n        <details className=\"w-full text-start\">\n          <summary className=\"cursor-pointer text-micro text-fg-muted\">Technische Details</summary>\n          <pre className=\"mt-2 overflow-auto whitespace-pre-wrap border border-line bg-surface-2 p-2 text-left font-mono text-micro text-fg-muted\">\n            {error.technical}\n          </pre>\n        </details>\n      ) : null}\n      {error.reference ? (\n        <p className=\"font-mono text-micro text-fg-subtle\">Referenz: {error.reference}</p>\n      ) : null}\n    </div>\n  );\n});\n\n/* -------------------------------------------------------------------------- */\n/* The specific states                                                         */\n/* -------------------------------------------------------------------------- */\n\nexport interface StateMessageProps extends React.ComponentProps<\"div\"> {\n  title?: string | undefined;\n  description?: string | undefined;\n  action?: React.ReactNode | undefined;\n  icon?: React.ReactNode | undefined;\n}\n\nfunction StateMessage({\n  title,\n  description,\n  action,\n  icon,\n  className,\n  tone = \"neutral\",\n  ...props\n}: StateMessageProps & { tone?: string }): React.ReactElement {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        \"flex flex-col items-center gap-3 border p-8 text-center\",\n        tone === \"caution\" ? \"border-caution-border bg-caution-subtle\" : \"border-line\",\n        className,\n      )}\n      {...props}\n    >\n      {icon ? (\n        <span aria-hidden=\"true\" className={tone === \"caution\" ? \"text-caution\" : \"text-fg-subtle\"}>\n          {icon}\n        </span>\n      ) : null}\n      <div>\n        <p className=\"text-ui font-medium text-fg\">{title}</p>\n        {description ? <p className=\"mt-1 text-micro text-fg-muted\">{description}</p> : null}\n      </div>\n      {action}\n    </div>\n  );\n}\n\nexport const OfflineState = React.forwardRef<HTMLDivElement, StateMessageProps>(function OfflineState(\n  { title = \"Offline\", description = \"Es gibt keine Verbindung zum Server. Änderungen werden nicht gespeichert.\", ...props },\n  ref,\n) {\n  return <StateMessage ref={ref} tone=\"caution\" title={title} description={description} icon={<CloudOff size={20} aria-hidden=\"true\" />} data-tea-state=\"offline\" {...props} />;\n});\n\nexport const MaintenanceState = React.forwardRef<HTMLDivElement, StateMessageProps>(function MaintenanceState(\n  { title = \"Wartungsmodus\", description = \"Die Anwendung wird gerade gewartet und ist möglicherweise nicht verfügbar.\", ...props },\n  ref,\n) {\n  return <StateMessage ref={ref} title={title} description={description} icon={<Wrench size={20} aria-hidden=\"true\" />} data-tea-state=\"maintenance\" {...props} />;\n});\n\nexport const PermissionDeniedState = React.forwardRef<HTMLDivElement, StateMessageProps>(\n  function PermissionDeniedState(\n    {\n      title = ERROR_TITLES.forbidden,\n      description = \"Für diesen Bereich fehlt dir die nötige Berechtigung. Bitte wende dich an eine Administration.\",\n      ...props\n    },\n    ref,\n  ) {\n    return <StateMessage ref={ref} tone=\"caution\" title={title} description={description} icon={<Lock size={20} aria-hidden=\"true\" />} data-tea-state=\"forbidden\" {...props} />;\n  },\n);\n\nexport const NotFoundState = React.forwardRef<HTMLDivElement, StateMessageProps>(function NotFoundState(\n  { title = ERROR_TITLES.notFound, description = \"Diese Seite oder dieser Eintrag existiert nicht.\", ...props },\n  ref,\n) {\n  return <StateMessage ref={ref} title={title} description={description} icon={<SearchX size={20} aria-hidden=\"true\" />} data-tea-state=\"notFound\" {...props} />;\n});\n\nexport const ServerErrorState = React.forwardRef<HTMLDivElement, StateMessageProps>(function ServerErrorState(\n  { title = ERROR_TITLES.server, description = \"Der Server konnte die Anfrage nicht verarbeiten.\", ...props },\n  ref,\n) {\n  return <StateMessage ref={ref} tone=\"caution\" title={title} description={description} icon={<ServerCrash size={20} aria-hidden=\"true\" />} data-tea-state=\"error\" {...props} />;\n});\n\n/* -------------------------------------------------------------------------- */\n"],"mappings":"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","names":["EmptyState","EmptyStateNew","EmptyStateFiltered","LoadingState","RefreshingIndicator","ErrorState","OfflineState","MaintenanceState","PermissionDeniedState","NotFoundState","ServerErrorState"]}

package/dist/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--tracking-tight:-.025em;--tracking-widest:.1em;--leading-tight:1.25;--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-font-family:var(--tea-font-sans);--default-mono-font-family:var(--tea-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*,:before,:after,::backdrop{border-color:var(--tea-line)}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--tea-line-strong) var(--tea-canvas);color-scheme:dark}body{background-color:var(--tea-canvas);color:var(--tea-fg);font-family:var(--tea-font-sans);font-size:var(--tea-text-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.25rem}:focus-visible{outline:2px solid var(--tea-ring);outline-offset:2px}::selection{background-color:var(--tea-accent);color:var(--tea-accent-fg)}*{scrollbar-width:thin;scrollbar-color:var(--tea-line-strong) var(--tea-canvas)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--tea-canvas)}::-webkit-scrollbar-thumb{background:var(--tea-line-strong)}::-webkit-scrollbar-thumb:hover{background:var(--tea-accent)}::-webkit-scrollbar-corner{background:var(--tea-canvas)}@media (pointer:coarse){[data-tea-touch]{min-height:var(--tea-touch-min);min-width:var(--tea-touch-min)}}@media (prefers-reduced-motion:reduce){*,:before,:after,::backdrop{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}[data-tea-motion=essential]{animation-duration:.01ms!important}}}@layer components{[data-tea-motion=essential]:after{content:"";animation:1.6s steps(4,end) infinite tea-pulse-essential}}@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.start-0{inset-inline-start:calc(var(--spacing) * 0)}.start-1\/2{inset-inline-start:50%}.start-2{inset-inline-start:calc(var(--spacing) * 2)}.end-0{inset-inline-end:calc(var(--spacing) * 0)}.end-2{inset-inline-end:calc(var(--spacing) * 2)}.end-3{inset-inline-end:calc(var(--spacing) * 3)}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-3{top:calc(var(--spacing) * 3)}.top-14{top:calc(var(--spacing) * 14)}.top-full{top:100%}.bottom-0{bottom:0}.z-50{z-index:50}.z-base{z-index:0}.z-dropdown{z-index:300}.z-header{z-index:200}.z-max{z-index:900}.z-modal{z-index:500}.z-overlay{z-index:400}.z-popover{z-index:600}.z-raised{z-index:10}.z-sticky{z-index:100}.z-toast{z-index:700}.z-tooltip{z-index:800}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.mx-auto{margin-inline:auto}.my-1{margin-block:var(--spacing)}.my-2{margin-block:calc(var(--spacing) * 2)}.my-3{margin-block:calc(var(--spacing) * 3)}.my-8{margin-block:calc(var(--spacing) * 8)}.-ms-1{margin-inline-start:calc(var(--spacing) * -1)}.-ms-px{margin-inline-start:-1px}.ms-0{margin-inline-start:0}.ms-1{margin-inline-start:var(--spacing)}.ms-5{margin-inline-start:calc(var(--spacing) * 5)}.ms-auto{margin-inline-start:auto}.-mt-1{margin-top:calc(var(--spacing) * -1)}.-mt-px{margin-top:-1px}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-\[calc\(var\(--tea-control-h\)\+0\.5rem\)\]{width:calc(var(--tea-control-h) + .5rem);height:calc(var(--tea-control-h) + .5rem)}.size-\[calc\(var\(--tea-control-h\)-0\.25rem\)\]{width:calc(var(--tea-control-h) - .25rem);height:calc(var(--tea-control-h) - .25rem)}.size-\[length\:var\(--tea-control-h\)\]{width:var(--tea-control-h);height:var(--tea-control-h)}.size-full{width:100%;height:100%}.control{height:var(--tea-control-h);padding-inline:var(--tea-control-px)}.control-h{height:var(--tea-control-h)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-\[calc\(100dvh-3\.5rem\)\]{height:calc(100dvh - 3.5rem)}.h-\[calc\(var\(--tea-control-h\)\+0\.25rem\)\]{height:calc(var(--tea-control-h) + .25rem)}.h-\[calc\(var\(--tea-control-h\)-0\.25rem\)\]{height:calc(var(--tea-control-h) - .25rem)}.h-auto{height:auto}.h-dvh{height:100dvh}.h-full{height:100%}.h-px{height:1px}.max-h-72{max-height:calc(var(--spacing) * 72)}.max-h-80{max-height:calc(var(--spacing) * 80)}.max-h-\[--radix-select-content-available-height\]{max-height:--radix-select-content-available-height}.max-h-\[80dvh\]{max-height:80dvh}.max-h-\[85dvh\]{max-height:85dvh}.max-h-\[calc\(100dvh-4rem\)\]{max-height:calc(100dvh - 4rem)}.max-h-\[var\(--radix-select-content-available-height\)\]{max-height:var(--radix-select-content-available-height)}.min-h-0{min-height:0}.min-h-\[60dvh\]{min-height:60dvh}.min-h-dvh{min-height:100dvh}.w-1\/3{width:33.3333%}.w-2\/3{width:66.6667%}.w-7{width:calc(var(--spacing) * 7)}.w-24{width:calc(var(--spacing) * 24)}.w-32{width:calc(var(--spacing) * 32)}.w-40{width:calc(var(--spacing) * 40)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-80{width:calc(var(--spacing) * 80)}.w-96{width:calc(var(--spacing) * 96)}.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}.w-\[min\(20rem\,85vw\)\]{width:min(20rem,85vw)}.w-\[min\(24rem\,90vw\)\]{width:min(24rem,90vw)}.w-\[min\(40rem\,90vw\)\]{width:min(40rem,90vw)}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-\[100rem\]{max-width:100rem}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:0}.min-w-5{min-width:calc(var(--spacing) * 5)}.min-w-8{min-width:calc(var(--spacing) * 8)}.min-w-32{min-width:calc(var(--spacing) * 32)}.min-w-40{min-width:calc(var(--spacing) * 40)}.min-w-48{min-width:calc(var(--spacing) * 48)}.min-w-56{min-width:calc(var(--spacing) * 56)}.min-w-\[36rem\]{min-width:36rem}.min-w-\[40rem\]{min-width:40rem}.min-w-\[var\(--radix-select-trigger-width\)\]{min-width:var(--radix-select-trigger-width)}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.touch-none{touch-action:none}.resize-none{resize:none}.resize-y{resize:vertical}.scroll-mt-20{scroll-margin-top:calc(var(--spacing) * 20)}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.field-gap{gap:var(--tea-field-gap)}.gap-0{gap:0}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-ui{gap:var(--tea-gap)}.section-gap{gap:var(--tea-section-gap)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.rounded-none{border-radius:0}.rounded-pill{border-radius:9999px}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-s-2{border-inline-start-style:var(--tw-border-style);border-inline-start-width:2px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-caution{border-color:var(--tea-caution)}.border-caution-border{border-color:var(--tea-caution-border)}.border-critical{border-color:var(--tea-critical)}.border-critical-border{border-color:var(--tea-critical-border)}.border-destructive{border-color:var(--tea-destructive)}.border-info{border-color:var(--tea-info)}.border-info-border{border-color:var(--tea-info-border)}.border-line{border-color:var(--tea-line)}.border-line-strong{border-color:var(--tea-line-strong)}.border-line\/50{border-color:var(--tea-line)}@supports (color:color-mix(in lab, red, red)){.border-line\/50{border-color:color-mix(in oklab, var(--tea-line) 50%, transparent)}}.border-neutral-border{border-color:var(--tea-neutral-border)}.border-positive{border-color:var(--tea-positive)}.border-positive-border{border-color:var(--tea-positive-border)}.border-primary{border-color:var(--tea-primary)}.border-primary-border{border-color:var(--tea-primary-border)}.border-transparent{border-color:#0000}.bg-accent{background-color:var(--tea-accent)}.bg-accent-subtle{background-color:var(--tea-accent-subtle)}.bg-canvas{background-color:var(--tea-canvas)}.bg-caution{background-color:var(--tea-caution)}.bg-caution-subtle{background-color:var(--tea-caution-subtle)}.bg-critical{background-color:var(--tea-critical)}.bg-critical-subtle{background-color:var(--tea-critical-subtle)}.bg-current{background-color:currentColor}.bg-destructive{background-color:var(--tea-destructive)}.bg-fg{background-color:var(--tea-fg)}.bg-fg-muted{background-color:var(--tea-fg-muted)}.bg-info{background-color:var(--tea-info)}.bg-info-subtle{background-color:var(--tea-info-subtle)}.bg-line{background-color:var(--tea-line)}.bg-neutral{background-color:var(--tea-neutral)}.bg-neutral-subtle{background-color:var(--tea-neutral-subtle)}.bg-overlay{background-color:var(--tea-overlay)}.bg-positive{background-color:var(--tea-positive)}.bg-positive-subtle{background-color:var(--tea-positive-subtle)}.bg-primary{background-color:var(--tea-primary)}.bg-primary-fg{background-color:var(--tea-primary-fg)}.bg-primary-subtle{background-color:var(--tea-primary-subtle)}.bg-surface{background-color:var(--tea-surface)}.bg-surface-2{background-color:var(--tea-surface-2)}.bg-surface-3{background-color:var(--tea-surface-3)}.bg-transparent{background-color:#0000}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.pad-card{padding:var(--tea-pad-card)}.px-0{padding-inline:0}.px-1{padding-inline:var(--spacing)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-\[calc\(var\(--tea-control-px\)\+0\.25rem\)\]{padding-inline:calc(var(--tea-control-px) + .25rem)}.px-\[calc\(var\(--tea-control-px\)-0\.25rem\)\]{padding-inline:calc(var(--tea-control-px) - .25rem)}.px-\[length\:var\(--tea-control-px\)\]{padding-inline:var(--tea-control-px)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-14{padding-block:calc(var(--spacing) * 14)}.py-20{padding-block:calc(var(--spacing) * 20)}.ps-2{padding-inline-start:calc(var(--spacing) * 2)}.ps-3{padding-inline-start:calc(var(--spacing) * 3)}.ps-4{padding-inline-start:calc(var(--spacing) * 4)}.ps-8{padding-inline-start:calc(var(--spacing) * 8)}.pe-1{padding-inline-end:var(--spacing)}.pe-2{padding-inline-end:calc(var(--spacing) * 2)}.pe-4{padding-inline-end:calc(var(--spacing) * 4)}.pe-8{padding-inline-end:calc(var(--spacing) * 8)}.pe-12{padding-inline-end:calc(var(--spacing) * 12)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-\[10vh\]{padding-top:10vh}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-end{text-align:end}.text-justify{text-align:justify}.text-left{text-align:left}.text-start{text-align:start}.align-\[-2px\]{vertical-align:-2px}.align-top{vertical-align:top}.font-mono{font-family:var(--tea-font-mono)}.text-label{font-size:.6875rem;line-height:var(--tw-leading,.875rem);letter-spacing:var(--tw-tracking,.08em);font-weight:var(--tw-font-weight,600)}.text-display{font-size:2rem;line-height:var(--tw-leading,2.5rem);letter-spacing:var(--tw-tracking,-.02em)}.text-hero{font-size:3rem;line-height:var(--tw-leading,1.1);letter-spacing:var(--tw-tracking,-.03em)}.text-section{font-size:1.5rem;line-height:var(--tw-leading,2rem);letter-spacing:var(--tw-tracking,-.01em)}.text-body{font-size:1rem;line-height:var(--tw-leading,1.625rem)}.text-lead{font-size:1.125rem;line-height:var(--tw-leading,1.75rem)}.text-micro{font-size:.75rem;line-height:var(--tw-leading,1rem)}.text-mono{font-size:.8125rem;line-height:var(--tw-leading,1.25rem)}.text-title{font-size:1.25rem;line-height:var(--tw-leading,1.75rem)}.text-ui{font-size:var(--tea-text-ui);font-size:.875rem;line-height:1.25rem;line-height:var(--tw-leading,1.25rem)}.text-\[9px\]{font-size:9px}.leading-none{--tw-leading:1;line-height:1}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:700;font-weight:700}.font-medium{--tw-font-weight:500;font-weight:500}.font-normal{--tw-font-weight:400;font-weight:400}.font-semibold{--tw-font-weight:600;font-weight:600}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-balance{text-wrap:balance}.text-wrap{text-wrap:wrap}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-accent{color:var(--tea-accent)}.text-accent-fg{color:var(--tea-accent-fg)}.text-caution{color:var(--tea-caution)}.text-caution-fg{color:var(--tea-caution-fg)}.text-critical{color:var(--tea-critical)}.text-critical-fg{color:var(--tea-critical-fg)}.text-current{color:currentColor}.text-destructive-fg{color:var(--tea-destructive-fg)}.text-fg{color:var(--tea-fg)}.text-fg-inverse{color:var(--tea-fg-inverse)}.text-fg-muted{color:var(--tea-fg-muted)}.text-fg-subtle{color:var(--tea-fg-subtle)}.text-info{color:var(--tea-info)}.text-info-fg{color:var(--tea-info-fg)}.text-neutral-fg{color:var(--tea-neutral-fg)}.text-positive{color:var(--tea-positive)}.text-positive-fg{color:var(--tea-positive-fg)}.text-primary{color:var(--tea-primary)}.text-primary-fg{color:var(--tea-primary-fg)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.accent-fg{accent-color:var(--tea-fg)}.opacity-50{opacity:.5}.shadow-modal{--tw-shadow:var(--tea-shadow-modal);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-overlay{--tw-shadow:var(--tea-shadow-overlay);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--tea-ease-standard));transition-duration:var(--tw-duration,.18s)}.transition-\[background-color\,border-color\,box-shadow\]{transition-property:background-color,border-color,box-shadow;transition-timing-function:var(--tw-ease,var(--tea-ease-standard));transition-duration:var(--tw-duration,.18s)}.transition-\[background-color\,border-color\,color\,box-shadow\,transform\]{transition-property:background-color,border-color,color,box-shadow,transform;transition-timing-function:var(--tw-ease,var(--tea-ease-standard));transition-duration:var(--tw-duration,.18s)}.transition-\[background-color\,border-color\,color\,box-shadow\]{transition-property:background-color,border-color,color,box-shadow;transition-timing-function:var(--tw-ease,var(--tea-ease-standard));transition-duration:var(--tw-duration,.18s)}.transition-\[background-color\,border-color\]{transition-property:background-color,border-color;transition-timing-function:var(--tw-ease,var(--tea-ease-standard));transition-duration:var(--tw-duration,.18s)}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--tea-ease-standard));transition-duration:var(--tw-duration,.18s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--tea-ease-standard));transition-duration:var(--tw-duration,.18s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--tea-ease-standard));transition-duration:var(--tw-duration,.18s)}.duration-\[120ms\]{--tw-duration:.12s;transition-duration:.12s}.ease-standard{--tw-ease:cubic-bezier(.2, 0, 0, 1);transition-timing-function:cubic-bezier(.2,0,0,1)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[--tea-control-icon\:0\.875rem\]{--tea-control-icon:.875rem}.\[--tea-control-icon\:1\.25rem\]{--tea-control-icon:1.25rem}.\[--tea-control-icon\:1rem\]{--tea-control-icon:1rem}.paused{animation-play-state:paused}.running{animation-play-state:running}.group-open\:rotate-45:is(:where(.group):is([open],:popover-open,:open) *){rotate:45deg}.group-focus-visible\:ring-2:is(:where(.group):focus-visible *){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.group-focus-visible\:ring-ring:is(:where(.group):focus-visible *){--tw-ring-color:var(--tea-ring)}.group-data-\[state\=checked\]\:scale-100:is(:where(.group)[data-state=checked] *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-data-\[state\=checked\]\:border-primary:is(:where(.group)[data-state=checked] *){border-color:var(--tea-primary)}.group-data-\[state\=checked\]\:bg-primary:is(:where(.group)[data-state=checked] *){background-color:var(--tea-primary)}.group-data-\[state\=checked\]\:font-medium:is(:where(.group)[data-state=checked] *){--tw-font-weight:500;font-weight:500}.group-data-\[state\=complete\]\:border-positive:is(:where(.group)[data-state=complete] *){border-color:var(--tea-positive)}.group-data-\[state\=complete\]\:bg-positive-subtle:is(:where(.group)[data-state=complete] *){background-color:var(--tea-positive-subtle)}.group-data-\[state\=complete\]\:text-positive:is(:where(.group)[data-state=complete] *){color:var(--tea-positive)}.group-data-\[state\=current\]\:border-primary:is(:where(.group)[data-state=current] *){border-color:var(--tea-primary)}.group-data-\[state\=current\]\:text-primary:is(:where(.group)[data-state=current] *){color:var(--tea-primary)}.group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state=open] *){rotate:180deg}.marker\:text-fg-subtle ::marker{color:var(--tea-fg-subtle)}.marker\:text-fg-subtle::marker{color:var(--tea-fg-subtle)}.marker\:text-fg-subtle ::-webkit-details-marker{color:var(--tea-fg-subtle)}.marker\:text-fg-subtle::-webkit-details-marker{color:var(--tea-fg-subtle)}.marker\:content-none ::marker{--tw-content:none;content:none}.marker\:content-none::marker{--tw-content:none;content:none}.marker\:content-none ::-webkit-details-marker{--tw-content:none;content:none}.marker\:content-none::-webkit-details-marker{--tw-content:none;content:none}.file\:me-3::file-selector-button{margin-inline-end:calc(var(--spacing) * 3)}.file\:rounded-none::file-selector-button{border-radius:0}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-ui::file-selector-button{font-size:var(--tea-text-ui);font-size:.875rem;line-height:1.25rem;line-height:var(--tw-leading,1.25rem)}.file\:font-medium::file-selector-button{--tw-font-weight:500;font-weight:500}.placeholder\:text-fg-subtle::placeholder{color:var(--tea-fg-subtle)}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:inset-y-0:before{content:var(--tw-content);inset-block:0}.before\:start-0:before{content:var(--tw-content);inset-inline-start:calc(var(--spacing) * 0)}.before\:w-0\.5:before{content:var(--tw-content);width:calc(var(--spacing) * .5)}.before\:bg-caution:before{content:var(--tw-content);background-color:var(--tea-caution)}.before\:bg-critical:before{content:var(--tw-content);background-color:var(--tea-critical)}.before\:bg-fg-muted:before{content:var(--tw-content);background-color:var(--tea-fg-muted)}.before\:bg-info:before{content:var(--tw-content);background-color:var(--tea-info)}.before\:bg-positive:before{content:var(--tw-content);background-color:var(--tea-positive)}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.read-only\:cursor-default:read-only{cursor:default}.read-only\:bg-surface-2:read-only{background-color:var(--tea-surface-2)}.read-only\:text-fg-muted:read-only{color:var(--tea-fg-muted)}.focus-within\:border-ring-strong:focus-within{border-color:var(--tea-ring-strong)}.focus-within\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-ring:focus-within{--tw-ring-color:var(--tea-ring)}@media (hover:hover){.hover\:border-line-strong:hover{border-color:var(--tea-line-strong)}.hover\:border-primary-hover:hover{border-color:var(--tea-primary-hover)}.hover\:bg-line:hover{background-color:var(--tea-line)}.hover\:bg-primary-hover:hover{background-color:var(--tea-primary-hover)}.hover\:bg-primary-subtle\/80:hover{background-color:var(--tea-primary-subtle)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary-subtle\/80:hover{background-color:color-mix(in oklab, var(--tea-primary-subtle) 80%, transparent)}}.hover\:bg-surface-2:hover{background-color:var(--tea-surface-2)}.hover\:bg-surface-3:hover{background-color:var(--tea-surface-3)}.hover\:text-fg:hover{color:var(--tea-fg)}.hover\:text-primary:hover{color:var(--tea-primary)}.hover\:no-underline:hover{text-decoration-line:none}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\:not-sr-only:focus{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.focus\:fixed:focus{position:fixed}.focus\:start-3:focus{inset-inline-start:calc(var(--spacing) * 3)}.focus\:top-3:focus{top:calc(var(--spacing) * 3)}.focus\:border:focus{border-style:var(--tw-border-style);border-width:1px}.focus\:border-primary:focus{border-color:var(--tea-primary)}.focus\:bg-primary:focus{background-color:var(--tea-primary)}.focus\:px-3:focus{padding-inline:calc(var(--spacing) * 3)}.focus\:py-2:focus{padding-block:calc(var(--spacing) * 2)}.focus\:text-ui:focus{font-size:var(--tea-text-ui);font-size:.875rem;line-height:1.25rem;line-height:var(--tw-leading,1.25rem)}.focus\:font-medium:focus{--tw-font-weight:500;font-weight:500}.focus\:text-primary-fg:focus{color:var(--tea-primary-fg)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:border-ring-strong:focus-visible{border-color:var(--tea-ring-strong)}.focus-visible\:border-transparent:focus-visible{border-color:#0000}.focus-visible\:bg-accent-subtle:focus-visible{background-color:var(--tea-accent-subtle)}.focus-visible\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--tea-ring)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:translate-y-px:active{--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-line:disabled{border-color:var(--tea-line)}.disabled\:bg-surface-2:disabled{background-color:var(--tea-surface-2)}.disabled\:text-fg-subtle:disabled{color:var(--tea-fg-subtle)}.disabled\:opacity-50:disabled{opacity:.5}.has-\[svg\]\:size-\[length\:var\(--tea-control-icon\)\]:has(:is(svg)){width:var(--tea-control-icon);height:var(--tea-control-icon)}.aria-disabled\:pointer-events-none[aria-disabled=true]{pointer-events:none}.aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.aria-invalid\:border-critical[aria-invalid=true]{border-color:var(--tea-critical)}.aria-invalid\:bg-critical-subtle[aria-invalid=true]{background-color:var(--tea-critical-subtle)}.aria-\[current\=page\]\:border-primary[aria-current=page]{border-color:var(--tea-primary)}.aria-\[current\=page\]\:text-primary[aria-current=page]{color:var(--tea-primary)}.aria-\[invalid\=true\]\:border-critical[aria-invalid=true]{border-color:var(--tea-critical)}.aria-\[invalid\=true\]\:ring-0[aria-invalid=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.aria-\[invalid\=true\]\:ring-critical[aria-invalid=true]{--tw-ring-color:var(--tea-critical)}.data-disabled\:pointer-events-none[data-disabled]{pointer-events:none}.data-disabled\:opacity-50[data-disabled]{opacity:.5}.data-\[active\]\:bg-accent-subtle[data-active]{background-color:var(--tea-accent-subtle)}.data-\[active\]\:text-fg[data-active]{color:var(--tea-fg)}.data-\[active\=true\]\:bg-accent-subtle[data-active=true]{background-color:var(--tea-accent-subtle)}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[disabled\=true\]\:cursor-not-allowed[data-disabled=true]{cursor:not-allowed}.data-\[disabled\=true\]\:opacity-50[data-disabled=true]{opacity:.5}.data-\[highlighted\]\:bg-accent-subtle[data-highlighted]{background-color:var(--tea-accent-subtle)}.data-\[highlighted\]\:bg-critical-subtle[data-highlighted]{background-color:var(--tea-critical-subtle)}.data-\[highlighted\]\:text-critical[data-highlighted]{color:var(--tea-critical)}.data-\[highlighted\]\:text-fg[data-highlighted]{color:var(--tea-fg)}.data-\[hover\]\:border-line-strong[data-hover]{border-color:var(--tea-line-strong)}.data-\[hover\]\:bg-surface-3[data-hover]{background-color:var(--tea-surface-3)}.data-\[orientation\=horizontal\]\:h-1[data-orientation=horizontal]{height:var(--spacing)}.data-\[orientation\=horizontal\]\:h-4[data-orientation=horizontal]{height:calc(var(--spacing) * 4)}.data-\[orientation\=horizontal\]\:h-full[data-orientation=horizontal]{height:100%}.data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.data-\[orientation\=vertical\]\:h-full[data-orientation=vertical]{height:100%}.data-\[orientation\=vertical\]\:w-1[data-orientation=vertical]{width:var(--spacing)}.data-\[orientation\=vertical\]\:w-4[data-orientation=vertical]{width:calc(var(--spacing) * 4)}.data-\[orientation\=vertical\]\:w-full[data-orientation=vertical]{width:100%}.data-\[orientation\=vertical\]\:flex-col[data-orientation=vertical]{flex-direction:column}.data-\[orientation\=vertical\]\:border-s-2[data-orientation=vertical]{border-inline-start-style:var(--tw-border-style);border-inline-start-width:2px}.data-\[orientation\=vertical\]\:border-e[data-orientation=vertical]{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.data-\[orientation\=vertical\]\:border-e-0[data-orientation=vertical]{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}.data-\[orientation\=vertical\]\:border-b-0[data-orientation=vertical]{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.data-\[orientation\=vertical\]\:text-start[data-orientation=vertical]{text-align:start}.data-\[placeholder\]\:text-fg-muted[data-placeholder]{color:var(--tea-fg-muted)}.data-\[state\=active\]\:border-primary[data-state=active]{border-color:var(--tea-primary)}.data-\[state\=active\]\:font-medium[data-state=active]{--tw-font-weight:500;font-weight:500}.data-\[state\=active\]\:text-primary[data-state=active]{color:var(--tea-primary)}.data-\[state\=checked\]\:translate-x-3[data-state=checked]{--tw-translate-x:calc(var(--spacing) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[state\=checked\]\:border-primary[data-state=checked]{border-color:var(--tea-primary)}.data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:var(--tea-primary)}.data-\[state\=checked\]\:bg-primary-fg[data-state=checked]{background-color:var(--tea-primary-fg)}.data-\[state\=checked\]\:text-primary[data-state=checked]{color:var(--tea-primary)}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed]{--tw-exit-translate-y:100%}.data-\[state\=closed\]\:slide-out-to-left[data-state=closed]{--tw-exit-translate-x:-100%}.data-\[state\=closed\]\:slide-out-to-right[data-state=closed]{--tw-exit-translate-x:100%}.data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed]{--tw-exit-translate-x:calc(1*100%)}.data-\[state\=closed\]\:slide-out-to-top[data-state=closed]{--tw-exit-translate-y:-100%}.data-\[state\=delayed-open\]\:animate-in[data-state=delayed-open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=delayed-open\]\:fade-in-0[data-state=delayed-open]{--tw-enter-opacity:0}.data-\[state\=delayed-open\]\:zoom-in-95[data-state=delayed-open]{--tw-enter-scale:.95}.data-\[state\=indeterminate\]\:border-primary[data-state=indeterminate]{border-color:var(--tea-primary)}.data-\[state\=indeterminate\]\:bg-primary[data-state=indeterminate]{background-color:var(--tea-primary)}.data-\[state\=on\]\:border-primary[data-state=on]{border-color:var(--tea-primary)}.data-\[state\=on\]\:bg-primary-subtle[data-state=on]{background-color:var(--tea-primary-subtle)}.data-\[state\=on\]\:text-primary[data-state=on]{color:var(--tea-primary)}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\[state\=open\]\:slide-in-from-bottom[data-state=open]{--tw-enter-translate-y:100%}.data-\[state\=open\]\:slide-in-from-left[data-state=open]{--tw-enter-translate-x:-100%}.data-\[state\=open\]\:slide-in-from-right[data-state=open]{--tw-enter-translate-x:100%}.data-\[state\=open\]\:slide-in-from-right-full[data-state=open]{--tw-enter-translate-x:calc(1*100%)}.data-\[state\=open\]\:slide-in-from-top[data-state=open]{--tw-enter-translate-y:-100%}.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked],.data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel]{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[swipe\=end\]\:animate-out[data-swipe=end]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe=move]{--tw-translate-x:var(--radix-toast-swipe-move-x);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[swipe\=move\]\:transition-none[data-swipe=move]{transition-property:none}@media (min-width:40rem){.sm\:flex{display:flex}.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}}@media (min-width:48rem){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-\[2fr_repeat\(auto-fit\,minmax\(9rem\,1fr\)\)\]{grid-template-columns:2fr repeat(auto-fit,minmax(9rem,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:p-6{padding:calc(var(--spacing) * 6)}.md\:px-6{padding-inline:calc(var(--spacing) * 6)}.md\:py-6{padding-block:calc(var(--spacing) * 6)}}@media (min-width:64rem){.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (pointer:coarse){.pointer-coarse\:text-body{font-size:1rem;line-height:var(--tw-leading,1.625rem)}}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\]\:text-fg-muted svg{color:var(--tea-fg-muted)}.\[\&\>\*\+\*\]\:-ms-px>*+*{margin-inline-start:-1px}.\[\&\>\*\+\*\]\:-mt-px>*+*{margin-top:-1px}.\[\&\>svg\]\:mt-0\.5>svg{margin-top:calc(var(--spacing) * .5)}.\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root,[data-theme=tea]{color-scheme:dark;--tea-canvas:#111318;--tea-surface:#171a21;--tea-surface-2:#1e222b;--tea-surface-3:#232733;--tea-overlay:#000000c7;--tea-fg:#e8e6e0;--tea-fg-muted:#a3a096;--tea-fg-subtle:#83807a;--tea-fg-inverse:#111318;--tea-line:#343a46;--tea-line-strong:#4e5666;--tea-brand:#f2c012;--tea-primary:#f2c012;--tea-primary-fg:#111318;--tea-primary-hover:#f7c72e;--tea-primary-subtle:#f2c0121f;--tea-primary-border:#f2c01266;--tea-accent:#f2c012;--tea-accent-fg:#111318;--tea-accent-subtle:#f2c0121a;--tea-ring:#f2c012;--tea-ring-strong:#ffd84d;--tea-positive:#4ade80;--tea-positive-fg:#0b1f14;--tea-positive-subtle:#4ade801f;--tea-positive-border:#4ade8066;--tea-info:#60a5fa;--tea-info-fg:#0a1729;--tea-info-subtle:#60a5fa1f;--tea-info-border:#60a5fa66;--tea-caution:#fb923c;--tea-caution-fg:#241104;--tea-caution-subtle:#fb923c1f;--tea-caution-border:#fb923c66;--tea-critical:#ff6b5e;--tea-critical-fg:#240705;--tea-critical-subtle:#ff6b5e1f;--tea-critical-border:#ff6b5e66;--tea-neutral:#a3a096;--tea-neutral-fg:#111318;--tea-neutral-subtle:#a3a0961f;--tea-neutral-border:#a3a09666;--tea-destructive:var(--tea-critical);--tea-destructive-fg:var(--tea-critical-fg);--tea-destructive-subtle:var(--tea-critical-subtle);--tea-destructive-border:var(--tea-critical-border);--tea-density:default;--tea-font-sans:"Jost Variable", "Jost", "Futura", ui-sans-serif, system-ui, sans-serif;--tea-font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;--tea-font-display:"Lilita One", "Jost Variable", ui-sans-serif, system-ui, sans-serif;--tea-shadow-raised:0 1px 3px #0000004d;--tea-shadow-overlay:6px 6px 0 0 #00000080;--tea-shadow-modal:8px 8px 0 0 #00000080;--tea-shadow-inset:inset 0 1px 0 0 #ffffff0a}[data-theme=hsm]{color-scheme:dark;--tea-canvas:#0e1116;--tea-surface:#161a21;--tea-surface-2:#1c212a;--tea-surface-3:#232935;--tea-overlay:#000c;--tea-fg:#e9eaee;--tea-fg-muted:#a1a8b4;--tea-fg-subtle:#808894;--tea-fg-inverse:#0e1116;--tea-line:#2f3743;--tea-line-strong:#49525f;--tea-brand:#e0332e;--tea-primary:#f2c012;--tea-primary-fg:#0e1116;--tea-primary-hover:#f7c72e;--tea-primary-subtle:#f2c0121f;--tea-primary-border:#f2c01266;--tea-accent:#f2c012;--tea-accent-fg:#0e1116;--tea-accent-subtle:#f2c0121a;--tea-ring:#f2c012;--tea-ring-strong:#ffd84d;--tea-positive:#4ade80;--tea-positive-fg:#0b1f14;--tea-positive-subtle:#4ade801f;--tea-positive-border:#4ade8066;--tea-info:#60a5fa;--tea-info-fg:#0a1729;--tea-info-subtle:#60a5fa1f;--tea-info-border:#60a5fa66;--tea-caution:#fb923c;--tea-caution-fg:#241104;--tea-caution-subtle:#fb923c1f;--tea-caution-border:#fb923c66;--tea-critical:#f87171;--tea-critical-fg:#240705;--tea-critical-subtle:#f871711f;--tea-critical-border:#f8717166;--tea-neutral:#a1a8b4;--tea-neutral-fg:#0e1116;--tea-neutral-subtle:#a1a8b41f;--tea-neutral-border:#a1a8b466;--tea-destructive:var(--tea-critical);--tea-destructive-fg:var(--tea-critical-fg);--tea-destructive-subtle:var(--tea-critical-subtle);--tea-destructive-border:var(--tea-critical-border);--tea-density:default;--tea-font-sans:"Jost Variable", "Jost", "Futura", ui-sans-serif, system-ui, sans-serif;--tea-font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;--tea-font-display:"Lilita One", "Jost Variable", ui-sans-serif, system-ui, sans-serif;--tea-shadow-raised:0 1px 3px #00000059;--tea-shadow-overlay:6px 6px 0 0 #0000008c;--tea-shadow-modal:8px 8px 0 0 #0000008c;--tea-shadow-inset:inset 0 1px 0 0 #ffffff0a}[data-theme=lutea]{color-scheme:dark;--tea-canvas:#121317;--tea-surface:#1a1b1f;--tea-surface-2:#212329;--tea-surface-3:#2a2c33;--tea-overlay:#000000c7;--tea-fg:#ede9e1;--tea-fg-muted:#aba69b;--tea-fg-subtle:#8a857b;--tea-fg-inverse:#121317;--tea-line:#383b44;--tea-line-strong:#525663;--tea-brand:#f2c012;--tea-primary:#f2c012;--tea-primary-fg:#121317;--tea-primary-hover:#f7c72e;--tea-primary-subtle:#f2c0121f;--tea-primary-border:#f2c01266;--tea-accent:#f2c012;--tea-accent-fg:#121317;--tea-accent-subtle:#f2c0121a;--tea-ring:#f2c012;--tea-ring-strong:#ffd84d;--tea-positive:#4fc97e;--tea-positive-fg:#0a1f13;--tea-positive-subtle:#4fc97e1f;--tea-positive-border:#4fc97e66;--tea-info:#5b8def;--tea-info-fg:#08142b;--tea-info-subtle:#5b8def1f;--tea-info-border:#5b8def66;--tea-caution:#f2921e;--tea-caution-fg:#1f1204;--tea-caution-subtle:#f2921e1f;--tea-caution-border:#f2921e66;--tea-critical:#f0726a;--tea-critical-fg:#230604;--tea-critical-subtle:#f0726a1f;--tea-critical-border:#f0726a66;--tea-neutral:#aba69b;--tea-neutral-fg:#121317;--tea-neutral-subtle:#aba69b1f;--tea-neutral-border:#aba69b66;--tea-destructive:var(--tea-critical);--tea-destructive-fg:var(--tea-critical-fg);--tea-destructive-subtle:var(--tea-critical-subtle);--tea-destructive-border:var(--tea-critical-border);--tea-density:compact;--tea-font-sans:"Jost Variable", "Jost", "Futura", ui-sans-serif, system-ui, sans-serif;--tea-font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;--tea-font-display:"Lilita One", "Jost Variable", ui-sans-serif, system-ui, sans-serif;--tea-shadow-raised:0 1px 3px #00000047;--tea-shadow-overlay:6px 6px 0 0 #00000080;--tea-shadow-modal:8px 8px 0 0 #00000080;--tea-shadow-inset:inset 0 1px 0 0 #ffffff0d}:root,[data-density=default]{--tea-control-h:2rem;--tea-control-px:.75rem;--tea-control-icon:1rem;--tea-row-h:2.25rem;--tea-cell-py:.5rem;--tea-cell-px:.75rem;--tea-gap:.75rem;--tea-section-gap:1.5rem;--tea-field-gap:1.25rem;--tea-pad-card:1.25rem;--tea-text-ui:.875rem;--tea-text-label:.6875rem;--tea-touch-min:2.75rem}[data-density=compact]{--tea-control-h:1.75rem;--tea-control-px:.625rem;--tea-control-icon:.875rem;--tea-row-h:2rem;--tea-cell-py:.375rem;--tea-cell-px:.625rem;--tea-gap:.5rem;--tea-section-gap:1.25rem;--tea-field-gap:1rem;--tea-pad-card:1rem;--tea-text-ui:.8125rem;--tea-text-label:.6875rem;--tea-touch-min:2.75rem}[data-density=comfortable]{--tea-control-h:2.25rem;--tea-control-px:.875rem;--tea-control-icon:1.125rem;--tea-row-h:2.75rem;--tea-cell-py:.75rem;--tea-cell-px:.875rem;--tea-gap:1rem;--tea-section-gap:2rem;--tea-field-gap:1.5rem;--tea-pad-card:1.5rem;--tea-text-ui:.9375rem;--tea-text-label:.75rem;--tea-touch-min:2.75rem}@keyframes tea-pulse-essential{0%{opacity:.35}50%{opacity:1}to{opacity:.35}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@tea-ui/admin",
+  "version": "0.1.0",
+  "description": "The admin layer: shell, navigation, data display and product states.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/styles.css"
+  },
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && node ../../scripts/fix-esm-extensions.mjs admin && node ../../scripts/sync-styles.mjs",
+    "prepublishOnly": "node ../../scripts/prepublish-guard.mjs"
+  },
+  "dependencies": {
+    "@tea-ui/core": "^0.1.0",
+    "@tea-ui/icons": "^0.1.0",
+    "@tea-ui/tokens": "^0.1.0",
+    "@tea-ui/ux-standards": "^0.1.0",
+    "@tea-ui/utils": "^0.1.0",
+    "radix-ui": "^1.4.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0 <20.0.0",
+    "react-dom": ">=18.2.0 <20.0.0"
+  },
+  "keywords": [
+    "react",
+    "admin",
+    "dashboard",
+    "components",
+    "data-display",
+    "tea-ui",
+    "design-system"
+  ],
+  "author": "landnevermore",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/landnevermore/TEAui.git",
+    "directory": "packages/admin"
+  },
+  "homepage": "https://landnevermore.github.io/TEAui/docs/",
+  "bugs": {
+    "url": "https://github.com/landnevermore/TEAui/issues"
+  }
+}