@podoba/react 0.0.1

package/src/components/view-toggle.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode } from 'react'
+import { ToggleButton, ToggleButtonGroup } from 'react-aria-components'
+import { Tooltip, TooltipTrigger } from './tooltip'
+
+/**
+ * ViewToggle — controlled segmented icon-toggle (port of gs-platform's
+ * `ViewToggle`).
+ *
+ * gs renders N 36px-square icon buttons; exactly one is active. The Tasks /
+ * Projects screens use it as the view-switcher (Table / Kanban / Calendar), so
+ * the API is kept generic: pass any list of `{ id, icon, label }` options.
+ *
+ * Built on React Aria Components `ToggleButtonGroup` + `ToggleButton` (single
+ * selection, empty-selection disallowed). RAC supplies the roving-tabindex
+ * radiogroup-style keyboard model (arrow keys move + select), `aria-pressed`
+ * state and focus management for free. Each option's `label` is its accessible
+ * name (`aria-label`) and its hover/focus tooltip.
+ *
+ * gs SCSS → our tokens (Tailwind + `@app/tokens` CSS vars, no SCSS — hard rule
+ * #3). The gs active treatment is a blue `#007bff` border — flagged OFF-brand,
+ * so the active segment uses our brand treatment instead (`fg` border +
+ * `surface-muted` fill). No blue anywhere.
+ *   - resting border `rgba(0,0,0,.1)` → `border-fg/10` (translucent black, closest)
+ *   - radius `4px`                    → `rounded-[4px]`
+ *   - hover bg `#f9f9f9`              → `surface-card` (#f7f6f2)
+ *   - active border (gs blue)         → `fg` (#0d0d0d) — on-brand
+ *   - active bg                       → `surface-muted` (#eceae1)
+ *   - active press `scale(.95)`       → `data-[pressed]:scale-95`
+ *   - icon box `16px`                 → `h-4 w-4`
+ */
+
+export type ViewToggleOption = {
+	/** Stable identifier — matched against `value` and returned by `onChange`. */
+	id: string
+	/** Icon node rendered inside the 16px box (decorative; `label` names it). */
+	icon: ReactNode
+	/** Accessible name + hover/focus tooltip for the option. */
+	label: string
+}
+
+export type ViewToggleProps = {
+	/** The selectable view options, rendered left-to-right. */
+	options: ViewToggleOption[]
+	/** Currently-active option id (controlled). */
+	value: string
+	/** Fired with the newly-selected option id. */
+	onChange: (id: string) => void
+	/** Accessible name for the whole group (e.g. "Switch view"). */
+	'aria-label': string
+	/** Disable the entire group. */
+	isDisabled?: boolean
+	className?: string
+}
+
+const buttonClass =
+	'inline-flex h-9 w-9 shrink-0 cursor-pointer select-none items-center justify-center rounded-[4px] ' +
+	'border border-fg/10 bg-surface text-fg outline-none transition-all duration-200 ' +
+	'data-[hovered]:bg-surface-card ' +
+	// On-brand active treatment (NOT gs blue): fg border + surface-muted fill.
+	'data-[selected]:border-fg data-[selected]:bg-surface-muted ' +
+	'data-[pressed]:scale-95 ' +
+	'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 ' +
+	'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+
+export function ViewToggle({
+	options,
+	value,
+	onChange,
+	isDisabled,
+	className,
+	'aria-label': ariaLabel,
+}: ViewToggleProps) {
+	return (
+		<ToggleButtonGroup
+			aria-label={ariaLabel}
+			selectionMode="single"
+			disallowEmptySelection
+			isDisabled={isDisabled}
+			selectedKeys={[value]}
+			onSelectionChange={keys => {
+				const next = [...keys][0]
+				if (next != null && String(next) !== value) onChange(String(next))
+			}}
+			className={['inline-flex items-center gap-1', className].filter(Boolean).join(' ')}
+		>
+			{options.map(option => (
+				<TooltipTrigger key={option.id}>
+					<ToggleButton id={option.id} aria-label={option.label} className={buttonClass}>
+						<span
+							className="flex h-4 w-4 items-center justify-center [&_svg]:h-4 [&_svg]:w-4"
+							aria-hidden="true"
+						>
+							{option.icon}
+						</span>
+					</ToggleButton>
+					<Tooltip>{option.label}</Tooltip>
+				</TooltipTrigger>
+			))}
+		</ToggleButtonGroup>
+	)
+}

package/src/index.ts

@@ -0,0 +1,37 @@
+// @podoba/react — the universal component library.
+//
+// React Aria Components + Tailwind, composed with `uic`. Seeded from graphic-standard's
+// @app/ui — atomic primitives + layout ONLY. Product-specific components (schema
+// renderer, delivery/approval modals, brand headers) stay in GS and consume this.
+// See ../../EXTRACTION.md.
+
+// --- factory ---
+export { uic, uiconfig, type ConfigVariants, type NoInfer } from "./utils/uic";
+
+// --- primitives ---
+export * from "./components/button";
+export * from "./components/input";
+export * from "./components/textarea";
+export * from "./components/checkbox";
+export * from "./components/radio";
+export * from "./components/switch";
+export * from "./components/select";
+export * from "./components/dialog";
+export * from "./components/dropdown-menu";
+export * from "./components/context-menu";
+export * from "./components/tooltip";
+export * from "./components/toast";
+export * from "./components/disclosure";
+export * from "./components/tabs";
+export * from "./components/section-tabs";
+export * from "./components/separator";
+export * from "./components/text";
+export * from "./components/view-toggle";
+
+// --- layout ---
+export * from "./layout/card";
+export * from "./layout/section";
+export * from "./layout/page-container";
+export * from "./layout/app-shell";
+export * from "./layout/topbar";
+export * from "./layout/persistent-page-shell";

package/src/layout/app-shell.tsx

@@ -0,0 +1,184 @@
+import { type ReactNode, useId, useState } from 'react'
+import {
+	Button as RACButton,
+	Dialog as RACDialog,
+	Modal as RACModal,
+	ModalOverlay as RACModalOverlay,
+} from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+/**
+ * AppShell — top-level application layout (ported pattern from gs-manager's
+ * `AppShell` + `AppShell.module.scss`).
+ *
+ * gs-manager used a full-height flex column (`100vh`, `overflow: hidden`) with
+ * a sticky `<header>` topbar and a single scrolling `<main>`. The Phase-1 GS
+ * Platform shell adds a left sidebar, so the SCSS intent is reimplemented in
+ * Tailwind as a CSS grid:
+ *
+ *   grid-rows-[auto_1fr]      — topbar row sizes to content, content fills the rest
+ *   grid-cols-[auto_1fr]      — sidebar takes its intrinsic width, main fills
+ *
+ * Slots (all optional except `main`):
+ *   banner   — full-bleed bar at the very top of the scroll column; scrolls away
+ *   topbar   — sticky header that pins to the top once the banner scrolls past
+ *   sidebar  — left rail; `<aside>` landmark. Collapses to a drawer on mobile
+ *   main     — `<main>` landmark content region
+ *
+ * Scroll model: the shell is `h-screen overflow-hidden`; the content side is a
+ * single vertical scroll column holding [full-bleed banner · sticky topbar ·
+ * main]. The banner sits at the top of that column so it SCROLLS AWAY with the
+ * content, while the topbar is `position: sticky; top: 0` and PINS to the top of
+ * the viewport once the banner scrolls past it (the classic announcement-bar +
+ * sticky-header pattern). The sidebar is a separate full-height rail outside the
+ * scroller, so it never scrolls with the content.
+ *
+ * Responsive: below `md` the sidebar leaves the grid flow and becomes an
+ * off-canvas drawer toggled by a hamburger button rendered in the topbar row.
+ * The drawer is a React Aria `ModalOverlay`/`Dialog` (accessibility.md): focus
+ * moves into the dialog on open and restores to the trigger on close, focus is
+ * trapped while open, and `Esc` / clicking the dimmed backdrop dismisses. The
+ * trigger advertises the drawer via `aria-expanded` + `aria-controls`.
+ *
+ * i18n: `@app/ui` ships no i18n, so when `sidebar` is passed the accessible
+ * names (`sidebarLabel`, `drawerToggleLabel`) are REQUIRED from the consumer —
+ * translated there, never English defaults baked in here.
+ */
+const Root = uic('div', {
+	displayName: 'AppShell',
+	baseClass:
+		'grid h-screen w-full overflow-hidden bg-surface ' +
+		// one full-height row; sidebar (auto) + content (1fr) columns on md+
+		'grid-rows-[100%] grid-cols-[1fr] md:grid-cols-[auto_1fr]',
+})
+
+const SidebarRail = uic('aside', {
+	displayName: 'AppShell.Sidebar',
+	baseClass: 'h-full w-64 shrink-0 overflow-y-auto border-r border-border bg-surface',
+})
+
+const Main = uic('main', {
+	displayName: 'AppShell.Main',
+	// gs-manager `.content`: white, 24px horizontal page padding (page-edge-padding-
+	// double) so page content is inset from the viewport edge — not flush left.
+	// Vertical padding gives every page breathing room. The SCROLL lives on the
+	// parent column (so the banner can scroll away under the sticky topbar), not here.
+	baseClass: 'min-w-0 flex-1 bg-surface px-6 pb-6 pt-6',
+})
+
+export type AppShellProps = {
+	/**
+	 * Full-bleed banner slot rendered ABOVE the topbar, edge-to-edge (e.g. the
+	 * demo-workspace bar). Takes no height when its content is null.
+	 */
+	banner?: ReactNode
+	/** Topbar slot — typically `<Topbar>…</Topbar>`. Spans the full width. */
+	topbar?: ReactNode
+	/** Main scrollable content region (`<main>` landmark). */
+	children: ReactNode
+	className?: string
+} & (
+	| {
+			/** Left sidebar; collapses to a drawer below `md`. */
+			sidebar: ReactNode
+			/** Accessible name of the sidebar landmark + its mobile drawer dialog (translated by the consumer). */
+			sidebarLabel: string
+			/** Accessible label for the mobile drawer toggle button (translated by the consumer). */
+			drawerToggleLabel: string
+	  }
+	| {
+			sidebar?: undefined
+			sidebarLabel?: undefined
+			drawerToggleLabel?: undefined
+	  }
+)
+
+export const AppShell = ({
+	banner,
+	topbar,
+	sidebar,
+	sidebarLabel,
+	drawerToggleLabel,
+	children,
+	className,
+}: AppShellProps) => {
+	const [drawerOpen, setDrawerOpen] = useState(false)
+	const drawerId = useId()
+	const hasSidebar = Boolean(sidebar)
+
+	return (
+		<Root className={className}>
+			{/* Desktop sidebar — a full-height rail OUTSIDE the scroll column, so it
+			    never scrolls with the content. */}
+			{hasSidebar ? (
+				<SidebarRail aria-label={sidebarLabel} className="hidden md:block">
+					{sidebar}
+				</SidebarRail>
+			) : null}
+
+			{/* Mobile drawer — off-canvas RAC modal dialog toggled by the hamburger.
+			    ModalOverlay supplies the focus trap, initial focus move, focus restore,
+			    Esc-to-close and backdrop dismissal; the visual (dimmed backdrop +
+			    left-anchored rail with shadow) matches the previous hand-rolled drawer. */}
+			{hasSidebar ? (
+				<RACModalOverlay
+					isOpen={drawerOpen}
+					onOpenChange={setDrawerOpen}
+					isDismissable
+					className="fixed inset-0 z-40 bg-black/40 md:hidden"
+				>
+					<RACModal className="absolute inset-y-0 left-0 z-50 h-full outline-none">
+						<RACDialog id={drawerId} aria-label={sidebarLabel} className="h-full outline-none">
+							<SidebarRail aria-label={sidebarLabel} className="shadow-lg">
+								{sidebar}
+							</SidebarRail>
+						</RACDialog>
+					</RACModal>
+				</RACModalOverlay>
+			) : null}
+
+			{/* Content column — the single vertical scroller. Holds the full-bleed
+			    banner, the sticky topbar, and main. Spans both columns when there is
+			    no sidebar so it always fills the viewport. */}
+			<div
+				className={
+					'flex min-h-0 min-w-0 flex-col overflow-y-auto overflow-x-hidden bg-surface' +
+					(hasSidebar ? '' : ' col-span-full')
+				}
+			>
+				{/* Full-bleed banner (edge-to-edge, no page padding). Sits at the top of
+				    the scroll column so it scrolls away with the content. */}
+				{banner ? <div className="shrink-0">{banner}</div> : null}
+
+				{/* Sticky topbar — pins to the top of the viewport once the banner
+				    scrolls past. 24px horizontal page padding (gs `.topbar` `padding: 0
+				    spacing-6`, zero vertical — the Topbar header carries its own 72px
+				    height + bottom border). The border lives on the Topbar header so it
+				    aligns (inset) with the padded content below. `bg-surface` keeps content
+				    from showing through while pinned. z-20 sits above scrolling content but
+				    below the mobile drawer (z-40/z-50); gs's literal z-10001 is to clear a
+				    fullscreen overlay we don't have. */}
+				<div className="sticky top-0 z-20 flex shrink-0 items-center bg-surface px-6">
+					{hasSidebar ? (
+						<RACButton
+							aria-label={drawerToggleLabel}
+							aria-expanded={drawerOpen}
+							aria-controls={drawerOpen ? drawerId : undefined}
+							onPress={() => setDrawerOpen((open) => !open)}
+							className={
+								'ml-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-fg outline-none ' +
+								'transition-colors hover:bg-surface-muted md:hidden ' +
+								'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring'
+							}
+						>
+							<span aria-hidden="true">☰</span>
+						</RACButton>
+					) : null}
+					<div className="min-w-0 flex-1">{topbar}</div>
+				</div>
+
+				<Main>{children}</Main>
+			</div>
+		</Root>
+	)
+}

package/src/layout/card.tsx

@@ -0,0 +1,41 @@
+import { uic } from '../utils/uic'
+
+/**
+ * Card — surface panel (port of gs-manager's `Card`).
+ *
+ * gs SCSS → our tokens (Tailwind + `@app/tokens` CSS vars, no SCSS — hard rule #3):
+ *   - `--radius-lg` (8px) → `rounded-lg` (our `--radius-lg` is 0.5rem = 8px). NB the
+ *     `rounded-panel` token is 1.1rem (~17.6px), NOT the 8px card radius — gs's Card
+ *     used `--radius-lg`, so this maps to `rounded-lg`.
+ *   - `--color-background-secondary` (the light card fill) → `bg-surface-card`
+ *     (our `--color-surface-card` = #f7f6f2).
+ *   - `outlined` → 1px `--color-border` (#eceae1) → `border border-border`.
+ *   - `elevated` → `card-shadow('md')` → `shadow-md`.
+ *   - padding sm/md/lg = 16/24/32px → `p-4` / `p-6` / `p-8`.
+ *
+ * Presentational only (hard rule #1) — no app imports. `relative` is preserved from
+ * gs so absolutely-positioned children (e.g. a Kanban overlay) anchor to the card.
+ */
+export const Card = uic('div', {
+	displayName: 'Card',
+	baseClass: 'relative rounded-lg bg-surface-card',
+	variants: {
+		variant: {
+			plain: '',
+			outlined: 'border border-border',
+			elevated: 'shadow-md',
+		},
+		padding: {
+			none: 'p-0',
+			sm: 'p-4',
+			md: 'p-6',
+			lg: 'p-8',
+		},
+	},
+	defaultVariants: {
+		variant: 'plain',
+		padding: 'md',
+	},
+})
+
+export type CardProps = React.ComponentProps<typeof Card>

package/src/layout/page-container.tsx

@@ -0,0 +1,36 @@
+import { uic } from '../utils/uic'
+
+/**
+ * PageContainer — max-width page shell (port of gs-manager's `PageContainer`).
+ *
+ * gs SCSS → our tokens (Tailwind + `@app/tokens` CSS vars, no SCSS — hard rule #3).
+ * No `size` → full-width with no constraint (horizontal padding is owned by the
+ * AppShell content, as in gs). The `size` scale maps to Tailwind's stock screen
+ * max-widths, matching gs's pixel values exactly:
+ *   - sm  → 640px, centred            → `max-w-screen-sm mx-auto`
+ *   - md  → 768px, centred            → `max-w-screen-md mx-auto`
+ *   - lg  → 1024px, centred           → `max-w-screen-lg mx-auto`
+ *   - xl  → 1280px, LEFT-aligned to match the header, then released to full width
+ *           at ≥1200px → `max-w-screen-xl ml-0 mr-0 min-[1200px]:max-w-full`
+ *   - 2xl → 1536px, centred, then released to full-width left-aligned at ≥1600px →
+ *           `max-w-screen-2xl mx-auto min-[1600px]:max-w-full min-[1600px]:mx-0`
+ *   - full → no constraint            → `max-w-full`
+ *
+ * Presentational only (hard rule #1) — no app imports.
+ */
+export const PageContainer = uic('div', {
+	displayName: 'PageContainer',
+	baseClass: 'w-full',
+	variants: {
+		size: {
+			sm: 'max-w-screen-sm mx-auto',
+			md: 'max-w-screen-md mx-auto',
+			lg: 'max-w-screen-lg mx-auto',
+			xl: 'max-w-screen-xl ml-0 mr-0 min-[1200px]:max-w-full',
+			'2xl': 'max-w-screen-2xl mx-auto min-[1600px]:max-w-full min-[1600px]:mx-0',
+			full: 'max-w-full',
+		},
+	},
+})
+
+export type PageContainerProps = React.ComponentProps<typeof PageContainer>

package/src/layout/persistent-page-shell.tsx

@@ -0,0 +1,134 @@
+import { type ReactNode, useEffect } from 'react'
+import { uic } from '../utils/uic'
+
+/**
+ * PersistentPageShell — page-level shell with a persistent header (hero +
+ * actions + navigation) and a content region that swaps between ready / loading
+ * / empty / error states without the header shifting (ported pattern from
+ * gs-manager's `PersistentPageShell`).
+ *
+ * gs-manager SCSS intent → Tailwind:
+ *   .shell      flex column, gap-6, full width        → `flex flex-col gap-6 w-full`
+ *   .header     flex column header cluster, optionally sticky
+ *   .topRow     grid 2fr/1fr (hero | actions)         → `grid grid-cols-[2fr_1fr]`
+ *   .actionSlotPlaceholder  reserves action space     → `invisible pointer-events-none`
+ *   .navigationSlotEmpty    reserves nav row height   → `min-h-10`
+ *   .contentSlot            `<main>` content region    → `w-full`
+ *
+ * "Persistent" = the header (hero/actions/navigation) stays mounted while the
+ * content region swaps via `contentState`; reserving action/nav space (the
+ * placeholder modifiers) prevents layout shift when those slots are empty,
+ * which is also what keeps viewport-locked modals from nudging the page.
+ *
+ * Page title: pass `title` and it is written to `document.title` (React 19,
+ * SSR-safe via `useEffect` so `renderToString` is a no-op).
+ */
+export type PersistentPageShellContentState = 'ready' | 'loading' | 'empty' | 'error'
+export type PersistentPageShellNavigationMode = 'auto' | 'preserve' | 'hidden'
+
+export type PersistentPageShellProps = {
+	className?: string
+	/** Page heading / title region (left of the top row). */
+	heroSlot?: ReactNode
+	/** Primary actions (right of the top row). Space is reserved if absent. */
+	actionSlot?: ReactNode
+	/** Secondary navigation row beneath the top row (tabs, breadcrumbs…). */
+	navigationSlot?: ReactNode
+	/** Main content, shown when `contentState === 'ready'`. */
+	contentSlot: ReactNode
+	/** When set, drives which slot the content region renders. */
+	contentState?: PersistentPageShellContentState
+	loadingSlot?: ReactNode
+	emptySlot?: ReactNode
+	errorSlot?: ReactNode
+	/** `preserve` always reserves the nav row; `auto` only when content exists. */
+	navigationMode?: PersistentPageShellNavigationMode
+	/** Reserve horizontal space for actions even when `actionSlot` is empty. */
+	preserveActionSlotSpace?: boolean
+	/** Keep the header pinned to the top while content scrolls. */
+	sticky?: boolean
+	/** Document title; written to `document.title` on mount (React 19). */
+	title?: string
+}
+
+const defaultLoadingSlot = <div className="text-sm text-fg-muted">Loading…</div>
+const defaultEmptySlot = <div className="text-sm text-fg-muted">No content available.</div>
+const defaultErrorSlot = <div className="text-sm text-danger">Failed to load content.</div>
+
+const Header = uic('header', {
+	displayName: 'PersistentPageShell.Header',
+	baseClass: 'flex w-full flex-col gap-6 bg-surface',
+	variants: {
+		sticky: { true: 'sticky top-0 z-[1]', false: '' },
+	},
+	defaultVariants: { sticky: false },
+})
+
+export const PersistentPageShell = ({
+	className,
+	heroSlot,
+	actionSlot,
+	navigationSlot,
+	contentSlot,
+	contentState = 'ready',
+	loadingSlot,
+	emptySlot,
+	errorSlot,
+	navigationMode = 'preserve',
+	preserveActionSlotSpace = true,
+	sticky = false,
+	title,
+}: PersistentPageShellProps) => {
+	useEffect(() => {
+		if (title !== undefined && typeof document !== 'undefined') {
+			document.title = title
+		}
+	}, [title])
+
+	const shouldRenderActionSlot = Boolean(actionSlot) || preserveActionSlotSpace
+	const shouldRenderNavigation =
+		navigationMode === 'preserve' || (navigationMode === 'auto' && Boolean(navigationSlot))
+
+	const resolvedContent =
+		contentState === 'loading'
+			? (loadingSlot ?? defaultLoadingSlot)
+			: contentState === 'empty'
+				? (emptySlot ?? defaultEmptySlot)
+				: contentState === 'error'
+					? (errorSlot ?? defaultErrorSlot)
+					: contentSlot
+
+	return (
+		<div className={['flex w-full flex-col gap-6', className].filter(Boolean).join(' ')}>
+			<Header sticky={sticky}>
+				<div className="grid w-full grid-cols-1 items-stretch gap-4 md:grid-cols-[2fr_1fr]">
+					<div className="min-w-0">{heroSlot}</div>
+					{shouldRenderActionSlot ? (
+						<div
+							className={[
+								'flex min-w-0 items-stretch justify-end',
+								actionSlot ? '' : 'invisible pointer-events-none',
+							]
+								.filter(Boolean)
+								.join(' ')}
+							aria-hidden={actionSlot ? undefined : true}
+						>
+							{actionSlot}
+						</div>
+					) : null}
+				</div>
+
+				{shouldRenderNavigation ? (
+					<div
+						className={['min-w-0', navigationSlot ? '' : 'min-h-10'].filter(Boolean).join(' ')}
+						aria-hidden={navigationSlot ? undefined : true}
+					>
+						{navigationSlot}
+					</div>
+				) : null}
+			</Header>
+
+			<main className="w-full min-w-0">{resolvedContent}</main>
+		</div>
+	)
+}

package/src/layout/section.tsx

@@ -0,0 +1,35 @@
+import { uic } from '../utils/uic'
+
+/**
+ * Section — vertical rhythm wrapper (port of gs-manager's `Section`).
+ *
+ * gs SCSS → our tokens (Tailwind + `@app/tokens` CSS vars, no SCSS — hard rule #3):
+ *   - full-width block, `overflow` left visible so focus rings / negative-margin
+ *     sticky headers on children aren't clipped (gs comment) → `w-full`.
+ *   - vertical padding scale (gs `--spacing-*`, responsive @640px = Tailwind `sm:`):
+ *       none → `py-0`
+ *       sm   → `py-4`
+ *       md   → `py-6 sm:py-8`   (the gs default)
+ *       lg   → `py-8 sm:py-12`
+ *       xl   → `py-12 sm:py-16`
+ *
+ * Presentational only (hard rule #1) — no app imports.
+ */
+export const Section = uic('section', {
+	displayName: 'Section',
+	baseClass: 'w-full',
+	variants: {
+		padding: {
+			none: 'py-0',
+			sm: 'py-4',
+			md: 'py-6 sm:py-8',
+			lg: 'py-8 sm:py-12',
+			xl: 'py-12 sm:py-16',
+		},
+	},
+	defaultVariants: {
+		padding: 'md',
+	},
+})
+
+export type SectionProps = React.ComponentProps<typeof Section>