@kennycorrea/ui 0.1.0

package/dist/atoms/Input/Input.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField } from '@radix-ui/themes';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+const SIZES = { sm: '1', md: '2', lg: '3' };
+export const Input = forwardRef(function Input({ size = 'md', invalid = false, className, ...props }, ref) {
+    return (_jsx(TextField.Root, { ref: ref, size: SIZES[size], 
+        // Themes has no invalid variant; the red tint and the ARIA state are ours, and they
+        // have to agree — a field that only looks wrong is no use to a screen reader.
+        color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('w-full', className), ...props }));
+});

package/dist/atoms/Input/index.d.ts

@@ -0,0 +1 @@
+export * from './Input';

package/dist/atoms/Input/index.js

@@ -0,0 +1 @@
+export * from './Input';

package/dist/atoms/Label/Label.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface LabelProps extends Omit<ComponentPropsWithoutRef<'label'>, 'color'> {
+    required?: boolean;
+}
+/**
+ * Themes' `Text` rendered as a label, so field labels sit on the same type scale as
+ * everything else.
+ *
+ * The asterisk is decoration: `required` is already on the input, and a screen reader
+ * announcing "New email star" reads worse than the field simply being required.
+ */
+export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/atoms/Label/Label.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@radix-ui/themes';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+/**
+ * Themes' `Text` rendered as a label, so field labels sit on the same type scale as
+ * everything else.
+ *
+ * The asterisk is decoration: `required` is already on the input, and a screen reader
+ * announcing "New email star" reads worse than the field simply being required.
+ */
+export const Label = forwardRef(function Label({ className, required = false, children, ...props }, ref) {
+    return (_jsxs(Text, { as: "label", size: "2", weight: "medium", ref: ref, className: cn('text-brand-900', className), ...props, children: [children, required ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-danger-ink", children: "*" })) : null] }));
+});

package/dist/atoms/Label/index.d.ts

@@ -0,0 +1 @@
+export * from './Label';

package/dist/atoms/Label/index.js

@@ -0,0 +1 @@
+export * from './Label';

package/dist/atoms/Popover/Popover.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export interface PopoverProps {
+    /** The control that opens it. Rendered as-is, so it keeps its own styling. */
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+}
+/**
+ * A popover rather than a dropdown menu: the contents are things to read — the bell feed —
+ * not commands to run, and a menu's roving focus would make arrow keys skip past text
+ * rather than scroll it.
+ */
+export declare function Popover({ trigger, children, open, onOpenChange, align, className, }: PopoverProps): import("react").JSX.Element;

package/dist/atoms/Popover/Popover.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover as ThemedPopover } from '@radix-ui/themes';
+import { cn } from '../../utils/cn';
+/**
+ * A popover rather than a dropdown menu: the contents are things to read — the bell feed —
+ * not commands to run, and a menu's roving focus would make arrow keys skip past text
+ * rather than scroll it.
+ */
+export function Popover({ trigger, children, open, onOpenChange, align = 'end', className, }) {
+    return (_jsxs(ThemedPopover.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(ThemedPopover.Trigger, { children: trigger }), _jsx(ThemedPopover.Content, { align: align, className: cn('w-80 max-w-[calc(100vw-1.5rem)] p-0', className), children: children })] }));
+}

package/dist/atoms/Popover/index.d.ts

@@ -0,0 +1 @@
+export * from './Popover';

package/dist/atoms/Popover/index.js

@@ -0,0 +1 @@
+export * from './Popover';

package/dist/atoms/Progress/Progress.d.ts

@@ -0,0 +1,9 @@
+export interface ProgressProps {
+    /** 0–1. Clamped, because a turnover ratio can genuinely exceed its ceiling. */
+    value: number;
+    label: string;
+    /** Carries meaning here: green, amber or red by how close the ceiling is. */
+    color?: 'jade' | 'amber' | 'red';
+    className?: string;
+}
+export declare function Progress({ value, label, color, className }: ProgressProps): import("react").JSX.Element;

package/dist/atoms/Progress/Progress.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Progress as ThemedProgress } from '@radix-ui/themes';
+import { cn } from '../../utils/cn';
+export function Progress({ value, label, color = 'jade', className }) {
+    return (_jsx(ThemedProgress
+    // Rounded for the announcement, clamped for both: turnover can genuinely pass its
+    // ceiling, and "110 out of 100" is not a sentence worth reading out.
+    , { 
+        // Rounded for the announcement, clamped for both: turnover can genuinely pass its
+        // ceiling, and "110 out of 100" is not a sentence worth reading out.
+        value: Math.round(Math.min(100, Math.max(0, value * 100))), max: 100, color: color, size: "2", "aria-label": label, className: cn(className) }));
+}

package/dist/atoms/Progress/index.d.ts

@@ -0,0 +1 @@
+export * from './Progress';

package/dist/atoms/Progress/index.js

@@ -0,0 +1 @@
+export * from './Progress';

package/dist/atoms/Select/Select.d.ts

@@ -0,0 +1,25 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+export interface SelectProps {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    'aria-describedby'?: string;
+    className?: string;
+}
+/**
+ * Themes' Select, which is its own styling of the same Radix primitive this used to wrap by
+ * hand — the chevron, the popper, the checked item and the scroll buttons all come with it.
+ *
+ * The option list stays a prop rather than children: every caller here builds it from data,
+ * and passing `<Select.Item>` elements around would make that a map at each site.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/atoms/Select/Select.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as ThemedSelect } from '@radix-ui/themes';
+import { forwardRef } from 'react';
+import { useUiStrings } from '../../strings';
+import { cn } from '../../utils/cn';
+/**
+ * Themes' Select, which is its own styling of the same Radix primitive this used to wrap by
+ * hand — the chevron, the popper, the checked item and the scroll buttons all come with it.
+ *
+ * The option list stays a prop rather than children: every caller here builds it from data,
+ * and passing `<Select.Item>` elements around would make that a map at each site.
+ */
+export const Select = forwardRef(function Select({ value, onValueChange, options, placeholder, invalid = false, disabled, required, id, name, className, ...props }, ref) {
+    const strings = useUiStrings();
+    return (_jsxs(ThemedSelect.Root, { value: value, onValueChange: onValueChange, disabled: disabled, required: required, name: name, children: [_jsx(ThemedSelect.Trigger, { ref: ref, id: id, placeholder: placeholder ?? strings.select, color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('w-full', className), ...props }), _jsx(ThemedSelect.Content, { position: "popper", children: options.map((option) => (_jsx(ThemedSelect.Item, { value: option.value, children: option.label }, option.value))) })] }));
+});

package/dist/atoms/Select/index.d.ts

@@ -0,0 +1 @@
+export * from './Select';

package/dist/atoms/Select/index.js

@@ -0,0 +1 @@
+export * from './Select';

package/dist/atoms/Separator/Separator.d.ts

@@ -0,0 +1,5 @@
+export interface SeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+export declare function Separator({ orientation, className }: SeparatorProps): import("react").JSX.Element;

package/dist/atoms/Separator/Separator.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator as ThemedSeparator } from '@radix-ui/themes';
+import { cn } from '../../utils/cn';
+export function Separator({ orientation = 'horizontal', className }) {
+    return _jsx(ThemedSeparator, { orientation: orientation, size: "4", className: cn(className) });
+}

package/dist/atoms/Separator/index.d.ts

@@ -0,0 +1 @@
+export * from './Separator';

package/dist/atoms/Separator/index.js

@@ -0,0 +1 @@
+export * from './Separator';

package/dist/atoms/Spinner/Spinner.d.ts

@@ -0,0 +1,12 @@
+export interface SpinnerProps {
+    className?: string;
+    label?: string;
+}
+/**
+ * Themes' spinner, wrapped so it still announces itself.
+ *
+ * Theirs is decoration — three animated bars with no role — which is right when it sits
+ * inside a button that already says "Saving". Standing alone, as it does on a loading
+ * screen, something has to tell a screen reader that a wait is in progress.
+ */
+export declare function Spinner({ className, label }: SpinnerProps): import("react").JSX.Element;

package/dist/atoms/Spinner/Spinner.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spinner as ThemedSpinner } from '@radix-ui/themes';
+import { useUiStrings } from '../../strings';
+import { cn } from '../../utils/cn';
+/**
+ * Themes' spinner, wrapped so it still announces itself.
+ *
+ * Theirs is decoration — three animated bars with no role — which is right when it sits
+ * inside a button that already says "Saving". Standing alone, as it does on a loading
+ * screen, something has to tell a screen reader that a wait is in progress.
+ */
+export function Spinner({ className, label }) {
+    const strings = useUiStrings();
+    return (_jsx("span", { role: "status", "aria-label": label ?? strings.loading, className: cn('inline-flex', className), children: _jsx(ThemedSpinner, { size: "2" }) }));
+}

package/dist/atoms/Spinner/index.d.ts

@@ -0,0 +1 @@
+export * from './Spinner';

package/dist/atoms/Spinner/index.js

@@ -0,0 +1 @@
+export * from './Spinner';

package/dist/atoms/Switch/Switch.d.ts

@@ -0,0 +1,4 @@
+import { Switch as ThemedSwitch } from '@radix-ui/themes';
+import { type ComponentPropsWithoutRef } from 'react';
+export type SwitchProps = Omit<ComponentPropsWithoutRef<typeof ThemedSwitch>, 'size'>;
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/atoms/Switch/Switch.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as ThemedSwitch } from '@radix-ui/themes';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+export const Switch = forwardRef(function Switch({ className, ...props }, ref) {
+    return _jsx(ThemedSwitch, { ref: ref, size: "2", className: cn(className), ...props });
+});

package/dist/atoms/Switch/index.d.ts

@@ -0,0 +1 @@
+export * from './Switch';

package/dist/atoms/Switch/index.js

@@ -0,0 +1 @@
+export * from './Switch';

package/dist/atoms/Textarea/Textarea.d.ts

@@ -0,0 +1,6 @@
+import { TextArea } from '@radix-ui/themes';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface TextareaProps extends Omit<ComponentPropsWithoutRef<typeof TextArea>, 'size' | 'color'> {
+    invalid?: boolean;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/atoms/Textarea/Textarea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextArea } from '@radix-ui/themes';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+export const Textarea = forwardRef(function Textarea({ invalid = false, className, rows = 3, ...props }, ref) {
+    return (_jsx(TextArea, { ref: ref, rows: rows, size: "2", color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('w-full', className), ...props }));
+});

package/dist/atoms/Textarea/index.d.ts

@@ -0,0 +1 @@
+export * from './Textarea';

package/dist/atoms/Textarea/index.js

@@ -0,0 +1 @@
+export * from './Textarea';

package/dist/atoms/Tooltip/Tooltip.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+export interface TooltipProps {
+    /** Nothing renders when this is absent, so a caller can switch it off. */
+    label?: string;
+    children: ReactNode;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+}
+/**
+ * A hover label, in place of the browser's own `title` attribute.
+ *
+ * `title` looks free but is not: it never appears for keyboard or touch users, it cannot be
+ * styled, and screen readers treat it inconsistently enough to be unreliable as a label.
+ * This shows on focus as well as hover and wires `aria-describedby`, which is what the
+ * collapsed sidebar needs — a rail of unlabelled icons is unusable without it.
+ */
+export declare function Tooltip({ label, children, side }: TooltipProps): import("react").JSX.Element;
+/**
+ * Kept as a no-op wrapper.
+ *
+ * Themes mounts its own tooltip provider inside `<Theme>`, so there is nothing left to
+ * provide — but the layout reads better with the boundary still visible, and removing it
+ * would touch a file for no behavioural reason.
+ */
+export declare function TooltipProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/atoms/Tooltip/Tooltip.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as ThemedTooltip } from '@radix-ui/themes';
+/**
+ * A hover label, in place of the browser's own `title` attribute.
+ *
+ * `title` looks free but is not: it never appears for keyboard or touch users, it cannot be
+ * styled, and screen readers treat it inconsistently enough to be unreliable as a label.
+ * This shows on focus as well as hover and wires `aria-describedby`, which is what the
+ * collapsed sidebar needs — a rail of unlabelled icons is unusable without it.
+ */
+export function Tooltip({ label, children, side = 'right' }) {
+    if (!label)
+        return _jsx(_Fragment, { children: children });
+    return (_jsx(ThemedTooltip, { content: label, side: side, children: children }));
+}
+/**
+ * Kept as a no-op wrapper.
+ *
+ * Themes mounts its own tooltip provider inside `<Theme>`, so there is nothing left to
+ * provide — but the layout reads better with the boundary still visible, and removing it
+ * would touch a file for no behavioural reason.
+ */
+export function TooltipProvider({ children }) {
+    return _jsx(_Fragment, { children: children });
+}

package/dist/atoms/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/atoms/Tooltip/index.js

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/atoms/index.d.ts

@@ -0,0 +1,18 @@
+export * from './Avatar';
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './Checkbox';
+export * from './ContextMenu';
+export * from './Dialog';
+export * from './Icon';
+export * from './Input';
+export * from './Label';
+export * from './Popover';
+export * from './Progress';
+export * from './Select';
+export * from './Separator';
+export * from './Spinner';
+export * from './Switch';
+export * from './Textarea';
+export * from './Tooltip';

package/dist/atoms/index.js

@@ -0,0 +1,18 @@
+export * from './Avatar';
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './Checkbox';
+export * from './ContextMenu';
+export * from './Dialog';
+export * from './Icon';
+export * from './Input';
+export * from './Label';
+export * from './Popover';
+export * from './Progress';
+export * from './Select';
+export * from './Separator';
+export * from './Spinner';
+export * from './Switch';
+export * from './Textarea';
+export * from './Tooltip';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './atoms';
+export * from './strings';
+export * from './utils';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './atoms';
+export * from './strings';
+export * from './utils';

package/dist/strings.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+/**
+ * The handful of strings the atoms say on their own behalf.
+ *
+ * **The dictionaries stay in the apps, deliberately** — that is a decision in the product
+ * brief, and it is the right one: a shared dictionary would make every string in three
+ * products one product's business. But two atoms do have something to say without being told.
+ * A standing `Spinner` has to announce that a wait is in progress, and a `Select` with no
+ * placeholder has to say something in the trigger.
+ *
+ * So the package declares what it needs and the host supplies it. English defaults, not
+ * Portuguese: an app that forgets to wrap gets something legible rather than something wrong,
+ * and Portuguese here would be a translatable string living in the shared package, which is
+ * exactly what this avoids.
+ */
+export interface UiStrings {
+    /** Announced by a standing spinner. */
+    loading: string;
+    /** The placeholder in a Select that was given none. */
+    select: string;
+}
+/**
+ * Feeds the atoms their strings, once, near the root.
+ *
+ * Every app wraps its tree in this and passes its own dictionary's words through. It takes a
+ * partial so an app that only cares about one of them says only that.
+ */
+export declare function UiStringsProvider({ strings, children, }: {
+    strings: Partial<UiStrings>;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * No error when there is no provider, unlike the apps' own `useCopy`.
+ *
+ * A missing provider there is a bug — the dictionary is the app. Here it is a host that did
+ * not need to override anything, which is a legitimate way to use this package and must not
+ * throw in a component as ordinary as a spinner.
+ */
+export declare function useUiStrings(): UiStrings;

package/dist/strings.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const DEFAULTS = {
+    loading: 'Loading',
+    select: 'Choose…',
+};
+const StringsContext = createContext(DEFAULTS);
+/**
+ * Feeds the atoms their strings, once, near the root.
+ *
+ * Every app wraps its tree in this and passes its own dictionary's words through. It takes a
+ * partial so an app that only cares about one of them says only that.
+ */
+export function UiStringsProvider({ strings, children, }) {
+    return (_jsx(StringsContext.Provider, { value: { ...DEFAULTS, ...strings }, children: children }));
+}
+/**
+ * No error when there is no provider, unlike the apps' own `useCopy`.
+ *
+ * A missing provider there is a bug — the dictionary is the app. Here it is a host that did
+ * not need to override anything, which is a legitimate way to use this package and must not
+ * throw in a component as ordinary as a spinner.
+ */
+export function useUiStrings() {
+    return useContext(StringsContext);
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from 'clsx';
+/** Merges conditional class names, letting later Tailwind utilities win over earlier ones. */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,6 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+/** Merges conditional class names, letting later Tailwind utilities win over earlier ones. */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './cn';
+export * from './theme';

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export * from './cn';
+export * from './theme';

package/dist/utils/theme.d.ts

@@ -0,0 +1,33 @@
+export declare const THEMES: readonly ["system", "light", "dark"];
+export type Theme = (typeof THEMES)[number];
+/**
+ * Applies a theme by stamping the root element, or clearing it for "system".
+ *
+ * Nothing but this function writes the attribute, and nothing but the stylesheet reads it.
+ * "System" deliberately stamps *nothing*: the CSS falls through to `prefers-color-scheme`
+ * on its own, so following the operating system needs no listener here and keeps working
+ * when the user changes it mid-session.
+ */
+export declare function applyTheme(theme: Theme): void;
+export declare function readTheme(): Theme;
+export declare function storeTheme(theme: Theme): void;
+/**
+ * The accents a business can dress an app in.
+ *
+ * Six of Radix's twenty-six, not all of them: every one costs a colour scale in the bundle —
+ * see the note in each app's `main.tsx` — and a page of near-identical greens is a worse
+ * choice than six that are obviously different from across a room. `jade` is first because it
+ * is Upfront's own, and the default for anyone who never opens the picker.
+ *
+ * **Only the accent moves.** Success stays jade, warning amber, danger red — those are
+ * meanings rather than decoration, and a business whose "paid" badge turned orange because
+ * they liked orange would have lost something. It does mean picking red or jade makes the
+ * accent and one semantic colour look alike, which is a fair trade for letting people choose.
+ *
+ * **The labels are not here.** They are words, and words belong to an app's own dictionary —
+ * the same rule that keeps `UiStrings` down to two entries.
+ */
+export declare const ACCENTS: readonly ["jade", "blue", "purple", "red", "orange", "yellow"];
+export type Accent = (typeof ACCENTS)[number];
+export declare function readAccent(): Accent;
+export declare function storeAccent(accent: Accent): void;

package/dist/utils/theme.js

@@ -0,0 +1,72 @@
+export const THEMES = ['system', 'light', 'dark'];
+const STORAGE_KEY = 'upfront.theme';
+/**
+ * Applies a theme by stamping the root element, or clearing it for "system".
+ *
+ * Nothing but this function writes the attribute, and nothing but the stylesheet reads it.
+ * "System" deliberately stamps *nothing*: the CSS falls through to `prefers-color-scheme`
+ * on its own, so following the operating system needs no listener here and keeps working
+ * when the user changes it mid-session.
+ */
+export function applyTheme(theme) {
+    const root = document.documentElement;
+    if (theme === 'system')
+        root.removeAttribute('data-theme');
+    else
+        root.setAttribute('data-theme', theme);
+}
+export function readTheme() {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        return THEMES.includes(stored) ? stored : 'system';
+    }
+    catch {
+        // Private windows and blocked site data both throw. A theme preference is not worth a
+        // crash, so the system default stands.
+        return 'system';
+    }
+}
+export function storeTheme(theme) {
+    try {
+        localStorage.setItem(STORAGE_KEY, theme);
+    }
+    catch {
+        // See readTheme. It applies for this session either way.
+    }
+}
+/**
+ * The accents a business can dress an app in.
+ *
+ * Six of Radix's twenty-six, not all of them: every one costs a colour scale in the bundle —
+ * see the note in each app's `main.tsx` — and a page of near-identical greens is a worse
+ * choice than six that are obviously different from across a room. `jade` is first because it
+ * is Upfront's own, and the default for anyone who never opens the picker.
+ *
+ * **Only the accent moves.** Success stays jade, warning amber, danger red — those are
+ * meanings rather than decoration, and a business whose "paid" badge turned orange because
+ * they liked orange would have lost something. It does mean picking red or jade makes the
+ * accent and one semantic colour look alike, which is a fair trade for letting people choose.
+ *
+ * **The labels are not here.** They are words, and words belong to an app's own dictionary —
+ * the same rule that keeps `UiStrings` down to two entries.
+ */
+export const ACCENTS = ['jade', 'blue', 'purple', 'red', 'orange', 'yellow'];
+const ACCENT_KEY = 'upfront.accent';
+export function readAccent() {
+    try {
+        const stored = localStorage.getItem(ACCENT_KEY);
+        return ACCENTS.includes(stored) ? stored : 'jade';
+    }
+    catch {
+        // Same as readTheme: a private window throws, and a colour is not worth a crash.
+        return 'jade';
+    }
+}
+export function storeAccent(accent) {
+    try {
+        localStorage.setItem(ACCENT_KEY, accent);
+    }
+    catch {
+        // It applies for this session either way.
+    }
+}