@engineio/ui 0.4.0

package/dist/components/ui/table/table-footer.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const TableFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+type TableFooter = ReturnType<typeof TableFooter>;
+export default TableFooter;

package/dist/components/ui/table/table-head.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLThAttributes } from "svelte/elements"
+
+  // Column headings are Bold 13px in Pure White, Title Case, tracking normal.
+  //
+  // NOT the system's 11px uppercase label spec, which is what these carried
+  // until now. Two reasons: at 11px with +0.08em on a dense grid the headings
+  // read as decoration rather than as the column names, and the brand reserves
+  // UPPERCASE for "small structural labels" — permission, not instruction.
+  // Title Case is the brand's default everywhere else, and a heading set in
+  // white Bold is unambiguous about which column it names.
+  //
+  // Left-aligned by default. Numeric columns should pass `class="text-right"`
+  // and set the cells to match, so figures align on their digits.
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLThAttributes> = $props()
+</script>
+
+<th
+  bind:this={ref}
+  class={cn(
+    "h-11 px-4 text-left align-middle whitespace-nowrap",
+    "text-[13px] font-bold text-foreground",
+    "[&:has([role=checkbox])]:pr-0",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</th>

package/dist/components/ui/table/table-head.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "../../../utils.js";
+import type { HTMLThAttributes } from "svelte/elements";
+declare const TableHead: import("svelte").Component<WithElementRef<HTMLThAttributes>, {}, "ref">;
+type TableHead = ReturnType<typeof TableHead>;
+export default TableHead;

package/dist/components/ui/table/table-header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  // Transparent, separated from the body by a rule one step stronger than the
+  // row dividers. That single difference in weight is what makes the header
+  // read as a header without needing a fill.
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props()
+</script>
+
+<thead
+  bind:this={ref}
+  class={cn("[&_tr]:border-b [&_tr]:border-grey-600", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</thead>

package/dist/components/ui/table/table-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const TableHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/components/ui/table/table-row.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  // A hairline underneath and nothing else. The row paints its own hover and
+  // selection now that the cells are transparent — no `group/row` plumbing
+  // needed, because the background it sets is the background you see.
+  //
+  // Hover is the system's 6% white wash; selection is the magenta tint, which
+  // is the one place the accent earns a place in a dense grid. Neither takes a
+  // coloured border: the brand rules those out, edge accents included.
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props()
+</script>
+
+<tr
+  bind:this={ref}
+  class={cn(
+    "border-b border-border transition-colors duration-140 ease-brand",
+    "hover:bg-white/6",
+    "data-[state=selected]:bg-primary-tint-12",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</tr>

package/dist/components/ui/table/table-row.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const TableRow: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableRowElement>>, {}, "ref">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

package/dist/components/ui/table/table.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLTableAttributes } from "svelte/elements"
+
+  // A ruled table: no frame, no fills, no gaps. The surface behind it shows
+  // through and the only structure is a hairline under each row — which is the
+  // system's rule that depth comes from rules and nested panels, with the
+  // rules doing all of the work.
+  //
+  // `border-collapse: collapse` (Tailwind's `border-collapse`) is deliberate
+  // and is what makes the dividers meet cleanly: under `separate` each cell
+  // paints its own bottom edge and adjacent cells double them up. It also
+  // restores the sticky-header technique, which the gapped-tile treatment this
+  // replaces had ruled out.
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLTableAttributes> = $props()
+</script>
+
+<div class="relative w-full overflow-x-auto">
+  <table
+    bind:this={ref}
+    class={cn(
+      "w-full caption-bottom border-collapse text-[13px]",
+      className,
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+  </table>
+</div>

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

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "../../../utils.js";
+import type { HTMLTableAttributes } from "svelte/elements";
+declare const Table: import("svelte").Component<WithElementRef<HTMLTableAttributes>, {}, "ref">;
+type Table = ReturnType<typeof Table>;
+export default Table;

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

@@ -0,0 +1,6 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
+export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

package/dist/components/ui/tabs/index.js

@@ -0,0 +1,8 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+const Root = TabsPrimitive.Root;
+export { Root, Content, List, Trigger, 
+//
+Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

package/dist/components/ui/tabs/tabs-content.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+declare const TabsContent: import("svelte").Component<TabsPrimitive.ContentProps, {}, "ref">;
+type TabsContent = ReturnType<typeof TabsContent>;
+export default TabsContent;

package/dist/components/ui/tabs/tabs-list.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	// The system ships tabs in two flavours. `pill` is the default because it
+	// is what every existing call site already renders; `underline` is the
+	// section-level treatment, a hairline rule with a magenta marker under the
+	// active tab. Set the same variant on TabsTrigger.
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "pill",
+		...restProps
+	}: TabsPrimitive.ListProps & { variant?: "pill" | "underline" } = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	class={cn(
+		"inline-flex items-center text-grey-300",
+		variant === "pill"
+			? "h-10 justify-center rounded-control bg-grey-850 p-1"
+			: "h-auto w-full justify-start gap-7 border-b border-grey-700",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-list.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+type $$ComponentProps = TabsPrimitive.ListProps & {
+    variant?: "pill" | "underline";
+};
+declare const TabsList: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type TabsList = ReturnType<typeof TabsList>;
+export default TabsList;

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	// Must match the variant set on the enclosing TabsList.
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "pill",
+		...restProps
+	}: TabsPrimitive.TriggerProps & { variant?: "pill" | "underline" } = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	class={cn(
+		"inline-flex cursor-pointer items-center justify-center whitespace-nowrap font-semibold",
+		"transition-colors duration-140 ease-brand",
+		"focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+		"disabled:pointer-events-none disabled:opacity-38",
+		variant === "pill"
+			? "rounded-control px-4 py-1.5 text-[13px] hover:text-foreground data-[state=active]:bg-white data-[state=active]:text-background"
+			: // The marker is a bottom border on the trigger itself, so it sits on
+				// the list's hairline rather than floating above it.
+				"-mb-px border-b-2 border-transparent px-0 pb-2.5 text-[15px] hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+type $$ComponentProps = TabsPrimitive.TriggerProps & {
+    variant?: "pill" | "underline";
+};
+declare const TabsTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type TabsTrigger = ReturnType<typeof TabsTrigger>;
+export default TabsTrigger;

package/dist/components/ui/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./textarea.svelte";
+export { Root, Root as Textarea, };

package/dist/components/ui/textarea/index.js

@@ -0,0 +1,4 @@
+import Root from "./textarea.svelte";
+export { Root, 
+//
+Root as Textarea, };

package/dist/components/ui/textarea/textarea.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	class={cn(
+		"field flex min-h-20 w-full px-3 py-2 text-[15px]",
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>

package/dist/components/ui/textarea/textarea.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "bits-ui";
+import type { HTMLTextareaAttributes } from "svelte/elements";
+declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/ui/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+declare const Root: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
+declare const Trigger: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
+declare const Provider: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
+export { Root, Trigger, Content, Provider, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, };

package/dist/components/ui/tooltip/index.js

@@ -0,0 +1,8 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+const Provider = TooltipPrimitive.Provider;
+export { Root, Trigger, Content, Provider, 
+//
+Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, };

package/dist/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		...restProps
+	}: TooltipPrimitive.ContentProps = $props();
+</script>
+
+<TooltipPrimitive.Content
+	bind:ref
+	{sideOffset}
+	class={cn(
+		"bg-grey-800 text-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-field border border-grey-700 px-3 py-1.5 text-[13px] font-semibold shadow-panel",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tooltip/tooltip-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+declare const TooltipContent: import("svelte").Component<TooltipPrimitive.ContentProps, {}, "ref">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @engineio/ui — the Engine design system.
+ *
+ *     import { Button, Card, CardHeader } from "@engineio/ui"
+ *
+ * Every component is also reachable by subpath, which is what you want when
+ * you only need one and would rather not pull the barrel:
+ *
+ *     import { Button } from "@engineio/ui/components/ui/button"
+ *
+ * The flat prefixed names below (`CardHeader`, `DialogTitle`) are the same
+ * objects the subpath modules export as `Header` / `Title`. Both spellings
+ * work; the prefixed ones are re-exported here because `Root`, `Content` and
+ * `Title` would collide across twenty components in one namespace.
+ *
+ * Styles are NOT imported by this module — CSS in a package entry point would
+ * force it on every consumer and break tree-shaking. Import the stylesheet
+ * yourself, once, and add the `@source` line:
+ *
+ *     @import "tailwindcss";
+ *     @import "@engineio/ui/styles";
+ *     @source "../node_modules/@engineio/ui/dist";
+ */
+export { cn } from "./utils.js";
+export type { WithElementRef, WithoutChild, WithoutChildren, WithoutChildrenOrChild, } from "./utils.js";
+export { EngineIcon, EngineWordmark, type EngineMarkVariant, } from "./components/brand/index.js";
+export { Alert, AlertDescription, AlertTitle, alertVariants, type AlertVariant, } from "./components/ui/alert/index.js";
+export { Badge, badgeVariants, type BadgeVariant, } from "./components/ui/badge/index.js";
+export { Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant, } from "./components/ui/button/index.js";
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./components/ui/card/index.js";
+export { Checkbox } from "./components/ui/checkbox/index.js";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./components/ui/dialog/index.js";
+export { Input } from "./components/ui/input/index.js";
+export { Label } from "./components/ui/label/index.js";
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger, } from "./components/ui/popover/index.js";
+export { Progress } from "./components/ui/progress/index.js";
+export { RadioGroup, RadioGroupItem, } from "./components/ui/radio-group/index.js";
+export { Select, SelectContent, SelectGroup, SelectGroupHeading, SelectItem, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, } from "./components/ui/select/index.js";
+export { Separator } from "./components/ui/separator/index.js";
+export { Skeleton } from "./components/ui/skeleton/index.js";
+export { Switch } from "./components/ui/switch/index.js";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./components/ui/table/index.js";
+export { Tabs, TabsContent, TabsList, TabsTrigger, } from "./components/ui/tabs/index.js";
+export { Textarea } from "./components/ui/textarea/index.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./components/ui/tooltip/index.js";

package/dist/index.js

@@ -0,0 +1,44 @@
+/**
+ * @engineio/ui — the Engine design system.
+ *
+ *     import { Button, Card, CardHeader } from "@engineio/ui"
+ *
+ * Every component is also reachable by subpath, which is what you want when
+ * you only need one and would rather not pull the barrel:
+ *
+ *     import { Button } from "@engineio/ui/components/ui/button"
+ *
+ * The flat prefixed names below (`CardHeader`, `DialogTitle`) are the same
+ * objects the subpath modules export as `Header` / `Title`. Both spellings
+ * work; the prefixed ones are re-exported here because `Root`, `Content` and
+ * `Title` would collide across twenty components in one namespace.
+ *
+ * Styles are NOT imported by this module — CSS in a package entry point would
+ * force it on every consumer and break tree-shaking. Import the stylesheet
+ * yourself, once, and add the `@source` line:
+ *
+ *     @import "tailwindcss";
+ *     @import "@engineio/ui/styles";
+ *     @source "../node_modules/@engineio/ui/dist";
+ */
+export { cn } from "./utils.js";
+export { EngineIcon, EngineWordmark, } from "./components/brand/index.js";
+export { Alert, AlertDescription, AlertTitle, alertVariants, } from "./components/ui/alert/index.js";
+export { Badge, badgeVariants, } from "./components/ui/badge/index.js";
+export { Button, buttonVariants, } from "./components/ui/button/index.js";
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./components/ui/card/index.js";
+export { Checkbox } from "./components/ui/checkbox/index.js";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./components/ui/dialog/index.js";
+export { Input } from "./components/ui/input/index.js";
+export { Label } from "./components/ui/label/index.js";
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger, } from "./components/ui/popover/index.js";
+export { Progress } from "./components/ui/progress/index.js";
+export { RadioGroup, RadioGroupItem, } from "./components/ui/radio-group/index.js";
+export { Select, SelectContent, SelectGroup, SelectGroupHeading, SelectItem, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, } from "./components/ui/select/index.js";
+export { Separator } from "./components/ui/separator/index.js";
+export { Skeleton } from "./components/ui/skeleton/index.js";
+export { Switch } from "./components/ui/switch/index.js";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./components/ui/table/index.js";
+export { Tabs, TabsContent, TabsList, TabsTrigger, } from "./components/ui/tabs/index.js";
+export { Textarea } from "./components/ui/textarea/index.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./components/ui/tooltip/index.js";

package/dist/styles/fonts.css

@@ -0,0 +1,116 @@
+/*
+  Engine design system — the brand face.
+
+  Proxima Nova only. Regular (400) for body, Semibold (600) for subtitles and
+  UI labels, Bold (700) for display and headings, Black (900) and the
+  condensed cuts for poster-scale words and stat bands.
+
+  Paths are RELATIVE to this file, so the consumer's bundler resolves and
+  fingerprints the binaries out of `node_modules`. The engine and rgs repos
+  currently use absolute `/fonts/...` URLs, which is why both of them keep
+  their own copy of these seven files in `static/fonts/`. Importing this
+  stylesheet replaces that: delete the local copies once you have migrated.
+
+  THREE CORRECTIONS TO THE UPSTREAM STYLESHEET, all deliberate:
+
+  1. Semibold is mapped to 600, not 500. Upstream declares
+     `ProximaNovaSemibold.otf` at `font-weight: 500`, so every `font-semibold`
+     (600) label in the products — which the design system specifies for ALL
+     UI labels and subtitles — matched no @font-face at all and was either
+     synthesised by the browser or snapped to Bold.
+
+  2. `font-display: swap` on every face. Otherwise the whole UI holds at
+     invisible text for up to 3s on a cold cache, and these are .otf files
+     served uncompressed.
+
+  3. LeagueGothic is NOT here. Upstream loads three LeagueGothic faces; the
+     brand is Proxima Nova and JetBrains Mono, and "no other typefaces" is an
+     explicit rule. If a product still needs it, it is a product font — load
+     it there.
+*/
+
+/* ── ProximaNova ──────────────────────────────────────────────────────── */
+
+@font-face {
+  font-family: "ProximaNova";
+  src: url("../fonts/ProximaNovaRegular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "ProximaNova";
+  src: url("../fonts/ProximaNovaSemibold.otf") format("opentype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "ProximaNova";
+  src: url("../fonts/ProximaNovaBold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "ProximaNova";
+  src: url("../fonts/ProximaNovaBlack.otf") format("opentype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ── Condensed cuts ───────────────────────────────────────────────────── */
+/*
+  Declared as their own families rather than as `font-stretch` variants of
+  ProximaNova. Upstream uses font-stretch, which means the condensed cuts can
+  only be reached by a `font-stretch` declaration — there is no Tailwind
+  utility for that, so in practice they were unreachable from component
+  markup. Separate families make `font-condensed` work.
+
+  Condensed Black and Extra Condensed Black are for big numbers and
+  poster-scale words only — stat bands, lanyards, single-word statements.
+  Never running text.
+*/
+
+@font-face {
+  font-family: "ProximaNovaCondensed";
+  src: url("../fonts/ProximaNovaCondensedBlack.otf") format("opentype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "ProximaNovaExtraCondensed";
+  src: url("../fonts/ProximaNovaExtraCondensedBlack.otf") format("opentype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "ProximaNovaExtraCondensed";
+  src: url("../fonts/ProximaNova-ExtraCondensedThin.otf") format("opentype");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+/*
+  ── JetBrains Mono ────────────────────────────────────────────────────────
+
+  NOT LOADED. The design system specifies JetBrains Mono for all numerics,
+  keys, IDs, code samples and eyebrow labels, and neither the engine nor the
+  rgs repo has ever shipped the binary — so every monospace surface in both
+  products currently renders in the platform default. `--font-mono` falls back
+  to `ui-monospace` so nothing breaks, but the brand face is absent.
+
+  JetBrains Mono is OFL-licensed and free to redistribute, so this is a
+  five-minute fix that was deliberately left to you rather than pulling font
+  binaries off the internet unasked: drop the .woff2 files into
+  `src/lib/fonts/` and add the @font-face blocks here. See README, Known gaps.
+*/

package/dist/styles/index.css

@@ -0,0 +1,28 @@
+/*
+  Engine design system — the single stylesheet a consumer imports.
+
+      @import "tailwindcss";
+      @import "@engineio/ui/styles";
+      @source "../node_modules/@engineio/ui/dist";
+
+  That third line is not optional. Tailwind 4 does not scan `node_modules`, so
+  without an explicit `@source` pointing at this package the utility classes
+  the primitives are written against never get generated. It resolves relative
+  to the CSS file declaring it, so adjust the path to wherever your
+  `node_modules` sits.
+
+  Expect a HALF-styled page rather than an obviously broken one: the tokens
+  below still apply (they are plain declarations), and any class that also
+  appears in your own source still works. Measured on a test consumer, leaving
+  the line out took the built stylesheet from 30KB to 6KB and raised no error.
+
+  Import the parts individually if you need finer control:
+
+      @import "@engineio/ui/styles/fonts";
+      @import "@engineio/ui/styles/tokens";
+      @import "@engineio/ui/styles/utilities";
+*/
+
+@import "./fonts.css";
+@import "./tokens.css";
+@import "./utilities.css";