@xenide-io/the-old-ui-theme 0.5.4 → 0.6.0

package/dist/ui.mjs

@@ -2,39 +2,24 @@
 import {
   Accordion,
   Alert,
-  AlertDialog,
-  AppLayout,
   AuthCard,
   AuthDivider,
   AuthLayout,
-  Autocomplete,
   Avatar,
   AvatarGroup,
   Badge,
-  Banner,
-  Breadcrumbs,
   Button,
-  ButtonGroup,
   Calendar,
   Caption,
   Card,
-  ChatBubble,
   Checkbox,
   Chip,
   CodeBlock,
-  Collapsible,
   CollapsibleSection,
-  Combobox,
   CommandPalette,
   ComponentDocs,
-  ContextMenu,
-  DataTable,
-  DatePicker,
-  Dialog,
   Display,
-  Divider,
   Dot,
-  Drawer,
   EmptyState,
   FileUpload,
   FilterBar,
@@ -47,68 +32,40 @@ import {
   H3,
   H4,
   H5,
-  HoverCard,
-  Indicator,
   Input,
-  InputGroup,
   Kbd,
   Label,
   Lead,
-  Lettermark,
   Link,
   Loader,
-  LoadingBar,
   LoadingState,
-  Menubar,
-  Metric,
   Modal,
   Mono,
-  NumberField,
   Overline,
   P,
-  Pagination,
   Panel,
-  Popover,
   Progress,
-  ProgressCircle,
   Radio,
   Range,
-  Rating,
-  Resizable,
-  Row,
-  ScrollArea,
   SearchGroup,
   SearchInput,
+  SectionTitle,
   SegmentedControl,
   Select,
   SettingsLayout,
   SettingsNav,
   ShowcaseWrapper,
-  Sidebar,
   Skeleton,
   Small,
-  Snack,
   SortMenu,
   Spinner,
-  Splotch,
   Stat,
-  Stepper,
   Table,
-  Tabs,
-  Tag,
-  Terminal,
   Textarea,
   ThemeDomSync,
-  ThemeManager,
   ThemeSwitcher,
-  Timeline,
-  Toast,
-  ToastStack,
-  Toggle,
-  ToggleButton,
-  ToggleGroup,
-  Widget
-} from "./chunk-SBBKXV35.mjs";
+  Toggle
+} from "./chunk-3G43JEI3.mjs";
 import {
   ButtonChrome,
   DropdownButton,
@@ -125,40 +82,25 @@ import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,
   Alert,
-  AlertDialog,
-  AppLayout,
   AuthCard,
   AuthDivider,
   AuthLayout,
-  Autocomplete,
   Avatar,
   AvatarGroup,
   Badge,
-  Banner,
-  Breadcrumbs,
   Button,
   ButtonChrome,
-  ButtonGroup,
   Calendar,
   Caption,
   Card,
-  ChatBubble,
   Checkbox,
   Chip,
   CodeBlock,
-  Collapsible,
   CollapsibleSection,
-  Combobox,
   CommandPalette,
   ComponentDocs,
-  ContextMenu,
-  DataTable,
-  DatePicker,
-  Dialog,
   Display,
-  Divider,
   Dot,
-  Drawer,
   DropdownButton,
   DropdownItem,
   DropdownMenu,
@@ -176,69 +118,41 @@ export {
   H3,
   H4,
   H5,
-  HoverCard,
   IconBase as Icon,
   IconByName,
-  Indicator,
   Input,
-  InputGroup,
   Kbd,
   Label,
   Lead,
-  Lettermark,
   Link,
   Loader,
-  LoadingBar,
   LoadingState,
-  Menubar,
-  Metric,
   Modal,
   Mono,
-  NumberField,
   Overline,
   P,
-  Pagination,
   Panel,
-  Popover,
   Progress,
-  ProgressCircle,
   Radio,
   Range,
-  Rating,
-  Resizable,
-  Row,
-  ScrollArea,
   SearchGroup,
   SearchInput,
+  SectionTitle,
   SegmentedControl,
   Select,
   SettingsLayout,
   SettingsNav,
   ShowcaseWrapper,
-  Sidebar,
   Skeleton,
   Small,
-  Snack,
   SortMenu,
   Spinner,
-  Splotch,
   Stat,
-  Stepper,
   Table,
-  Tabs,
-  Tag,
-  Terminal,
   Textarea,
   ThemeDomSync,
-  ThemeManager,
   ThemeSwitcher,
-  Timeline,
-  Toast,
-  ToastStack,
   Toggle,
-  ToggleButton,
-  ToggleGroup,
   Tooltip,
-  TooltipProvider,
-  Widget
+  TooltipProvider
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Props-driven React components and theme tokens inspired by classic interface design \u2014 optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/app/globals.css

@@ -36,6 +36,24 @@
   font-display: swap;
 }
 
+/* Instrument Serif — the one display voice, for marketing and document titles.
+   Single weight on purpose: contrast comes from the serif shapes and scale,
+   not from more weights competing with Open Runde. */
+@font-face {
+  font-family: "Instrument Serif";
+  src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Instrument Serif";
+  src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
 /* Structural tokens — shared across colour themes */
 :where(:root) {
   --ph-shadow-elevation-3000: 0 3px 0 var(--ph-border-3000);

package/src/components/ui/Typography.tsx

@@ -57,7 +57,10 @@ function textClass(
   return cn(base, toneMap[tone], weight && weightMap[weight], truncate && "truncate", className);
 }
 
-/** Display text — largest heading, use once per page */
+/**
+ * Display — the marketing hero voice: Instrument Serif, fluid size, one per page.
+ * Product page titles use H1/`SuitePageHeader` (sans) instead.
+ */
 export function Display({
   children,
   tone = "default",
@@ -65,7 +68,12 @@ export function Display({
   truncate,
   className,
 }: TextBaseProps) {
-  return <h1 className={textClass("text-4xl font-extrabold tracking-tight md:text-5xl", tone, weight, truncate, className)}>{children}</h1>;
+  return <h1 className={textClass("ph-hero-title", tone, weight, truncate, className)}>{children}</h1>;
+}
+
+/** Section title — serif, fluid; pairs with Display on public pages. */
+export function SectionTitle({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
+  return <h2 className={textClass("ph-section-title", tone, weight, truncate, className)}>{children}</h2>;
 }
 
 /** H1 — page title */
@@ -113,9 +121,9 @@ export function Overline({ children, tone = "muted", weight, truncate, className
   return <span className={textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className)}>{children}</span>;
 }
 
-/** Lead — intro paragraph, larger and muted */
+/** Lead — intro paragraph under a Display/SectionTitle; measure-capped for readability */
 export function Lead({ children, tone = "subtle", weight, truncate, className }: TextBaseProps) {
-  return <p className={textClass("text-lg leading-relaxed", tone, weight, truncate, className)}>{children}</p>;
+  return <p className={textClass("ph-lead", tone, weight, truncate, className)}>{children}</p>;
 }
 
 /** Mono — code, data, technical text */

package/src/components/ui/index.ts

@@ -1,5 +1,11 @@
 "use client";
 
+/**
+ * Full UI surface — also published as `@xenide-io/the-old-ui-theme/ui`.
+ * Scoped to primitives the ShellStack apps use, plus the demo-only docs
+ * helpers (ShowcaseWrapper, ComponentDocs, CollapsibleSection, CodeBlock).
+ */
+
 export {
   Button as Button,
   type ButtonProps as ButtonProps,
@@ -27,12 +33,6 @@ export {
   type CardProps as CardProps,
   type CardVariant as CardVariant,
 } from "@/components/ui/Card";
-export {
-  Drawer as Drawer,
-  type DrawerProps as DrawerProps,
-  type DrawerSide as DrawerSide,
-  type DrawerSize as DrawerSize,
-} from "@/components/ui/Drawer";
 export {
   Kbd as Kbd,
   type KbdPlatform as KbdPlatform,
@@ -110,21 +110,10 @@ export {
   type ModalProps as ModalProps,
   type ModalSize as ModalSize,
 } from "@/components/ui/Modal";
-export {
-  Breadcrumbs as Breadcrumbs,
-  Pagination as Pagination,
-  type BreadcrumbItem as BreadcrumbItem,
-  type BreadcrumbsProps as BreadcrumbsProps,
-  type PaginationProps as PaginationProps,
-} from "@/components/ui/Navigation";
 export {
   Panel as Panel,
   type PanelProps as PanelProps,
 } from "@/components/ui/Panel";
-export {
-  Rating as Rating,
-  type RatingProps as RatingProps,
-} from "@/components/ui/Rating";
 export {
   SearchGroup as SearchGroup,
   SearchInput as SearchInput,
@@ -141,24 +130,7 @@ export {
   type StatProps as StatProps,
   type StatTone as StatTone,
 } from "@/components/ui/Stat";
-export {
-  Toast as Toast,
-  ToastStack as ToastStack,
-  type ToastProps as ToastProps,
-  type ToastStackProps as ToastStackProps,
-  type ToastStatus as ToastStatus,
-} from "@/components/ui/Toast";
-export {
-  Tabs as Tabs,
-  type TabItem as TabItem,
-  type TabsProps as TabsProps,
-  type TabsVariant as TabsVariant,
-} from "@/components/ui/Tabs";
 export { ThemeDomSync } from "@/components/ui/ThemeDomSync";
-export {
-  ThemeManager,
-  type ThemeManagerProps,
-} from "@/components/ui/ThemeManager";
 export {
   ThemeSwitcher,
   type ThemeSwitcherProps,
@@ -172,11 +144,9 @@ export {
   type IconName as IconName,
 } from "@/components/icons";
 export { Accordion } from "@/components/ui/Accordion";
-export { Stepper } from "@/components/ui/Stepper";
 export { SegmentedControl } from "@/components/ui/SegmentedControl";
 export { CommandPalette } from "@/components/ui/CommandPalette";
 export { Calendar } from "@/components/ui/Calendar";
-export { HoverCard } from "@/components/ui/HoverCard";
 export {
   Tooltip,
   TooltipProvider,
@@ -214,6 +184,7 @@ export { ShowcaseWrapper } from "@/components/ui/ShowcaseWrapper";
 export { CollapsibleSection } from "@/components/ui/CollapsibleSection";
 export {
   Display,
+  SectionTitle,
   H1,
   H2,
   H3,
@@ -239,72 +210,6 @@ export {
   Progress as Progress,
   type ProgressProps as ProgressProps,
 } from "@/components/ui/Progress";
-export {
-  ChatBubble as ChatBubble,
-  type ChatBubbleProps as ChatBubbleProps,
-  type ChatBubbleVariant as ChatBubbleVariant,
-} from "@/components/ui/ChatBubble";
-export {
-  Terminal as Terminal,
-  type TerminalProps as TerminalProps,
-} from "@/components/ui/Terminal";
-export {
-  Indicator as Indicator,
-  type IndicatorProps as IndicatorProps,
-  type IndicatorPosition as IndicatorPosition,
-} from "@/components/ui/Indicator";
-export {
-  Timeline as Timeline,
-  type TimelineProps as TimelineProps,
-  type TimelineEvent as TimelineEvent,
-} from "@/components/ui/Timeline";
-export {
-  Banner as Banner,
-  type BannerProps as BannerProps,
-  type BannerType as BannerType,
-} from "@/components/ui/Banner";
-export {
-  Dialog as Dialog,
-  type DialogProps as DialogProps,
-} from "@/components/ui/Dialog";
-export {
-  Divider as Divider,
-  type DividerProps as DividerProps,
-} from "@/components/ui/Divider";
-export {
-  Tag as Tag,
-  type TagProps as TagProps,
-  type TagType as TagType,
-} from "@/components/ui/Tag";
-export {
-  ProgressCircle as ProgressCircle,
-  type ProgressCircleProps as ProgressCircleProps,
-} from "@/components/ui/ProgressCircle";
-export {
-  Row as Row,
-  type RowProps as RowProps,
-} from "@/components/ui/Row";
-export {
-  Widget as Widget,
-  type WidgetProps as WidgetProps,
-} from "@/components/ui/Widget";
-export {
-  Lettermark as Lettermark,
-  type LettermarkProps as LettermarkProps,
-} from "@/components/ui/Lettermark";
-export {
-  Splotch as Splotch,
-  type SplotchProps as SplotchProps,
-  type SplotchColor as SplotchColor,
-} from "@/components/ui/Splotch";
-export {
-  Popover as Popover,
-  type PopoverProps as PopoverProps,
-} from "@/components/ui/Popover";
-export {
-  LoadingBar as LoadingBar,
-  type LoadingBarProps as LoadingBarProps,
-} from "@/components/ui/LoadingBar";
 export {
   Link as Link,
   type LinkProps as LinkProps,
@@ -313,93 +218,11 @@ export {
   Spinner as Spinner,
   type SpinnerProps as SpinnerProps,
 } from "@/components/ui/Spinner";
-export {
-  Snack as Snack,
-  type SnackProps as SnackProps,
-} from "@/components/ui/Snack";
-export {
-  Combobox as Combobox,
-  type ComboboxProps as ComboboxProps,
-  type ComboboxOption as ComboboxOption,
-} from "@/components/ui/Combobox";
-export {
-  Autocomplete as Autocomplete,
-  type AutocompleteProps as AutocompleteProps,
-  type AutocompleteOption as AutocompleteOption,
-} from "@/components/ui/Autocomplete";
-export {
-  ContextMenu as ContextMenu,
-  type ContextMenuProps as ContextMenuProps,
-  type ContextMenuItem as ContextMenuItem,
-} from "@/components/ui/ContextMenu";
-export {
-  Resizable as Resizable,
-  type ResizableProps as ResizableProps,
-} from "@/components/ui/Resizable";
-export {
-  ScrollArea as ScrollArea,
-  type ScrollAreaProps as ScrollAreaProps,
-} from "@/components/ui/ScrollArea";
-export {
-  NumberField as NumberField,
-  type NumberFieldProps as NumberFieldProps,
-} from "@/components/ui/NumberField";
-export {
-  InputGroup as InputGroup,
-  type InputGroupProps as InputGroupProps,
-} from "@/components/ui/InputGroup";
-export {
-  ButtonGroup as ButtonGroup,
-  type ButtonGroupProps as ButtonGroupProps,
-} from "@/components/ui/ButtonGroup";
-export {
-  ToggleButton as ToggleButton,
-  ToggleGroup as ToggleGroup,
-  type ToggleButtonProps as ToggleButtonProps,
-  type ToggleGroupProps as ToggleGroupProps,
-} from "@/components/ui/Toggle";
-export {
-  Menubar as Menubar,
-  type MenubarProps as MenubarProps,
-  type MenubarItem as MenubarItem,
-} from "@/components/ui/Menubar";
-export {
-  AlertDialog as AlertDialog,
-  type AlertDialogProps as AlertDialogProps,
-} from "@/components/ui/AlertDialog";
 export {
   Dot as Dot,
   type DotProps as DotProps,
 } from "@/components/ui/Dot";
-export {
-  Collapsible as Collapsible,
-  type CollapsibleProps as CollapsibleProps,
-} from "@/components/ui/Collapsible";
-export {
-  Metric as Metric,
-  type MetricProps as MetricProps,
-} from "@/components/ui/Metric";
 export {
   Chip as Chip,
   type ChipProps as ChipProps,
 } from "@/components/ui/Chip";
-export {
-  DataTable as DataTable,
-  type DataTableProps as DataTableProps,
-  type DataTableColumn as DataTableColumn,
-} from "@/components/ui/DataTable";
-export {
-  DatePicker as DatePicker,
-  type DatePickerProps as DatePickerProps,
-} from "@/components/ui/DatePicker";
-export {
-  AppLayout as AppLayout,
-  type AppLayoutProps as AppLayoutProps,
-} from "@/components/ui/AppLayout";
-
-export {
-  Sidebar as Sidebar,
-  type SidebarProps as SidebarProps,
-  type SidebarGroup as SidebarGroup,
-  type SidebarItemDef as SidebarItemDef,
-} from "@/components/ui/Sidebar";

package/src/components/ui/typography.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Display, Lead, H1, SectionTitle } from "@/components/ui/Typography";
+
+describe("typography voices", () => {
+  it("gives marketing display the serif hero class and keeps product H1 sans", () => {
+    render(
+      <>
+        <Display>Track time without ceremony</Display>
+        <SectionTitle>Built for the suite</SectionTitle>
+        <Lead>One scale across five apps.</Lead>
+      </>,
+    );
+
+    expect(screen.getByText("Track time without ceremony")).toHaveClass("ph-hero-title");
+    expect(screen.getByText("Built for the suite")).toHaveClass("ph-section-title");
+    expect(screen.getByText("One scale across five apps.")).toHaveClass("ph-lead");
+  });
+
+  it("renders product headings without the marketing classes", () => {
+    render(<H1>Reports</H1>);
+
+    const heading = screen.getByRole("heading", { name: "Reports" });
+    expect(heading).not.toHaveClass("ph-hero-title");
+    expect(heading.className).toContain("font-bold");
+  });
+});

package/src/styles/suite-skin.css

@@ -11,7 +11,8 @@
    ───────────────────────────────────────────────────────────────────────── */
 
 html {
-  /* Native-app touch: no grey flash on tap, no double-tap delay. */
+  /* Native-app touch: no grey flash on tap, no double-tap zoom delay. */
+  touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
   /* App-like vertical scrolling: no rubber-band chaining into the page. */
   overscroll-behavior-y: none;
@@ -292,6 +293,25 @@ html.dark .today-page-frame__cloud--2 {
   }
 }
 
+/* Sticky title chrome is for Today only — workspace pages scroll normally. */
+.suite-app-layout__main:not(:has([data-test="today-page"])) .suite-page-header-sticky {
+  position: static;
+  top: auto;
+  z-index: auto;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+  background: none;
+  border-bottom: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+.suite-app-layout__main:not(:has([data-test="today-page"]))
+  .suite-page-header-sticky[data-stuck="true"] {
+  padding-top: 0;
+}
+
 /* Page stage — ONE layout standard for every suite app.
    - Default width="full": use the full main column (no max-width centring)
    - Always use suite-page-inset for title baseline (top + left)

package/src/styles/typography.css

@@ -1,11 +1,19 @@
 /**
- * Font stacks — `next/font` only injects `--font-inter`; glyphs & canvas should match body.
+ * Type system — two voices, one scale.
  *
- * `@tailwindcss/typography`: not wired here on purpose — this repo uses PostHog-style
- * component-level sizes (`.ph-btn`, `.ph-table`, `.ph-h2-rule`) instead of prose blocks.
+ * 1. Open Runde (`font-sans`) — every product surface: UI, body copy, controls.
+ *    Also `font-display` in app configs, i.e. tight-tracked in-app page titles.
+ * 2. Instrument Serif (`font-serif`) — the single display voice: marketing
+ *    heroes, section titles, and document titles. One weight only.
+ * 3. Monospace stack — code, CSV, token chips. Functional, never decorative.
+ *
+ * Marketing type uses `clamp()` so a hero has ONE definition instead of three
+ * breakpoint variants per app. Product UI keeps Tailwind's step scale.
  */
 
 :root {
+  /* Display / editorial — pairs with Open Runde by contrast, not similarity */
+  --ph-font-serif-stack: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
   /* Code / CSV / token chips — monospace with clear ASCII */
   --ph-font-monospace-stack:
     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
@@ -16,4 +24,65 @@
    */
   --ph-font-shortcut-stack: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Helvetica, Arial, sans-serif;
+
+  /* Fluid marketing scale — min at 360px, max at ~1280px */
+  --ph-type-hero: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem);
+  --ph-type-section: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
+  --ph-type-feature: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
+  --ph-type-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
+}
+
+/* ── Marketing / landing type ─────────────────────────────────────────────
+   Use these on public pages so all five apps share one hero rhythm.
+   In-app chrome keeps `font-sans`; do not use hero classes inside the shell. */
+
+.ph-hero-title {
+  font-family: var(--ph-font-serif-stack);
+  font-weight: 400;
+  font-size: var(--ph-type-hero);
+  line-height: 1.02;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+
+.ph-section-title {
+  font-family: var(--ph-font-serif-stack);
+  font-weight: 400;
+  font-size: var(--ph-type-section);
+  line-height: 1.08;
+  letter-spacing: -0.015em;
+  text-wrap: balance;
+}
+
+/* Feature/card headings stay sans — they sit next to body copy and need weight. */
+.ph-feature-title {
+  font-size: var(--ph-type-feature);
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+.ph-lead {
+  font-size: var(--ph-type-lead);
+  line-height: 1.6;
+  max-width: 42ch;
+  text-wrap: pretty;
+}
+
+.ph-lead-wide {
+  max-width: 60ch;
+}
+
+/* Eyebrow above a hero — the only place small caps tracking is worth it. */
+.ph-eyebrow {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+/* Emphasis inside a serif hero: italic, not a third font. */
+.ph-hero-title em,
+.ph-section-title em {
+  font-style: italic;
 }