@coffer-org/web-ui 4.0.0

package/dist/theme.css

@@ -0,0 +1,189 @@
+/**
+ * The kit's own theme tokens. Every component under packages/web-ui/src renders through
+ * these custom properties (--bg, --surface, --border, --accent and their neighbours) and the
+ * Tailwind semantic mapping below (@theme inline) that turns them into utility classes
+ * (bg-surface, border-border, text-accent, …). A kit whose colours are defined by its
+ * consumer is not a kit: the application imports this file (`@import '@coffer-org/web-ui/theme.css';`
+ * in its own global stylesheet) rather than declaring these variables itself.
+ *
+ * Consumed by Tailwind's CSS-first config (`@theme inline`, v4): this file does NOT need its
+ * own `@import 'tailwindcss';` — it is pulled into the application's stylesheet, which already
+ * has that import, and Tailwind processes `@theme` directives anywhere in the resulting CSS
+ * import graph. Layout breakpoints (--breakpoint-nav/panel/list) are an application-layout
+ * concern (sidebar/bottom-nav and list-view switching, both under packages/web/app) and stay in
+ * packages/web/globals.css, not here.
+ */
+
+/* ── Raw palette: separate for each theme (ordinary cascading variables) ───── */
+/* Default = dark. The 'dark' choice has no own block; it falls back to these values. */
+:root {
+  --bg: #0c0e13;
+  --surface: #13161e;
+  --elevated: #1a1e28;
+  --border: #242836;
+  --border2: #2e3444;
+  --text: #e8eaf0;
+  --muted: #7b859a;
+  --accent: #8689e6;
+  --accent2: #6f72d8;
+  --on-accent: #0c0e13;
+  --danger: #ff6b6b;
+  --on-danger: #0c0e13;
+  --success: #4ade80;
+  --warning: #fbbf24;
+  --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+/* Light — applied by explicit choice OR auto when the OS is light. */
+:root[data-theme='light'] {
+  --bg: #f7f8fa;
+  --surface: #ffffff;
+  --elevated: #f0f2f6;
+  --border: #e2e5ea;
+  --border2: #d3d7df;
+  --text: #1a1d24;
+  --muted: #687083;
+  --accent: #4f46e5;
+  --accent2: #4338ca;
+  --on-accent: #ffffff;
+  --danger: #d92d20;
+  --on-danger: #ffffff;
+  --success: #15803d;
+  --warning: #b45309;
+  --shadow: 0 8px 24px rgba(40, 50, 80, 0.12);
+}
+/* Duplicates :root[data-theme='light']; keep in sync (a media query cannot be grouped with a plain selector). */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) {
+    --bg: #f7f8fa;
+    --surface: #ffffff;
+    --elevated: #f0f2f6;
+    --border: #e2e5ea;
+    --border2: #d3d7df;
+    --text: #1a1d24;
+    --muted: #687083;
+    --accent: #4f46e5;
+    --accent2: #4338ca;
+    --on-accent: #ffffff;
+    --danger: #d92d20;
+    --on-danger: #ffffff;
+    --success: #15803d;
+    --warning: #b45309;
+    --shadow: 0 8px 24px rgba(40, 50, 80, 0.12);
+  }
+}
+
+/* E-ink — high contrast for color e-readers (Kaleido and similar).
+   White bg + black text = maximum contrast. Accent/semantic colors are saturated DARK
+   colors (readable on a moiré-prone pale color film). Border/muted remain neutral.
+   COLORS ONLY; geometry does NOT change. Shadows are disabled through --shadow. */
+:root[data-theme='eink'] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --elevated: #f2f2f2;
+  --border: #000000;
+  --border2: #000000;
+  --text: #000000;
+  --muted: #3a3a3a;
+  --accent: #0d3bb0;
+  --accent2: #082a85;
+  --on-accent: #ffffff;
+  --danger: #b80016;
+  --on-danger: #ffffff;
+  --success: #0a6e1d;
+  --warning: #9a5200;
+  --shadow: none;
+  /* Eink: dark+saturated, maximum separation under color film (Kaleido).
+     Color only on chip text/border; the background remains white (e-ink rule). */
+  --cat-1: #b80016;
+  --cat-2: #9a5200;
+  --cat-3: #6e5b00;
+  --cat-4: #0a6e1d;
+  --cat-5: #006d6d;
+  --cat-6: #0d3bb0;
+  --cat-7: #5b1aa6;
+  --cat-8: #a80060;
+}
+
+/* E-ink: category chip color (--cat is set by catColor() on the element).
+   E-ink ONLY — ordinary themes keep the default chip appearance (neutral border
+   + dark text, like dates). Do not change the background (white). */
+:root[data-theme='eink'] .cat-chip {
+  color: var(--cat);
+  border-color: var(--cat);
+}
+
+/* E-ink: sticky chrome is solid, without transparency/blur. */
+:root[data-theme='eink'] .eink-solid {
+  background-color: var(--bg);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+/* E-ink: translucent accent tints (bg-accent/10·/15) read poorly under
+   color film (Kaleido); accent text on a pale accent background creates moiré.
+   E-ink rule: solid neutral background, black text. Tint → elevated gray;
+   force inner text to black (accent remains for text/icons on white). */
+:root[data-theme='eink'] .bg-accent\/10,
+:root[data-theme='eink'] .bg-accent\/15 {
+  background-color: var(--elevated) !important;
+  color: var(--text) !important;
+}
+:root[data-theme='eink'] .bg-accent\/10.text-accent,
+:root[data-theme='eink'] .bg-accent\/15.text-accent,
+:root[data-theme='eink'] .bg-accent\/10 .text-accent,
+:root[data-theme='eink'] .bg-accent\/15 .text-accent {
+  color: var(--text) !important;
+}
+
+/* ── Tailwind semantic tokens → raw palette ──
+   inline: utilities (.bg-bg, etc.) compile to var(--bg), so overriding
+   raw variables under [data-theme] rethemes the UI without changing classes. */
+@theme inline {
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-elevated: var(--elevated);
+  --color-border: var(--border);
+  --color-border2: var(--border2);
+  --color-text: var(--text);
+  --color-muted: var(--muted);
+  --color-accent: var(--accent);
+  --color-accent2: var(--accent2);
+  --color-danger: var(--danger);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+
+  /* shadcn semantic tokens → our palette */
+  --color-background: var(--bg);
+  --color-foreground: var(--text);
+  --color-card: var(--surface);
+  --color-card-foreground: var(--text);
+  --color-popover: var(--surface);
+  --color-popover-foreground: var(--text);
+  --color-primary: var(--accent);
+  --color-primary-foreground: var(--on-accent);
+  --color-secondary: var(--elevated);
+  --color-secondary-foreground: var(--text);
+  --color-muted-foreground: var(--muted);
+  --color-accent-foreground: var(--on-accent);
+  --color-destructive: var(--danger);
+  --color-destructive-foreground: var(--on-danger);
+  --color-input: var(--border);
+  --color-ring: var(--accent);
+
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', sans-serif;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+}
+
+/* ── E-ink: disable motion and shadows (does not affect geometry) ────────── */
+:root[data-theme='eink'] *,
+:root[data-theme='eink'] *::before,
+:root[data-theme='eink'] *::after {
+  transition: none !important;
+  animation: none !important;
+  box-shadow: none !important;
+}

package/dist/types.d.ts

@@ -0,0 +1,84 @@
+import type { FC, ReactNode } from 'react';
+import type { FieldMeta, LayoutEl, OptionItem } from '@coffer-org/sdk/fields';
+export type TFn = (key: string, opts?: Record<string, unknown>) => string;
+export type TemplateProps<D = unknown> = {
+    data: D;
+    t: TFn;
+};
+export type TemplateImporter<D = any> = () => Promise<{
+    default: import('react').FC<TemplateProps<D>>;
+}>;
+export type FieldMode = 'view' | 'edit' | 'create';
+export interface RecordViewProps {
+    record: Record<string, unknown>;
+    onEdit?: () => void;
+}
+export interface RecordCtx {
+    library: string;
+    shelf: string;
+    recordId: string | null;
+}
+export interface ElementRenderProps {
+    el?: LayoutEl;
+    field?: FieldMeta;
+    fieldKey?: string;
+    value: unknown;
+    label?: string;
+    required?: boolean;
+    error?: string;
+    selectOptions?: OptionItem[];
+    excludeValues?: string[];
+    mode: FieldMode;
+    recordCtx: RecordCtx;
+    bare?: boolean;
+    children?: ReactNode;
+}
+export interface FieldRenderProps extends ElementRenderProps {
+    field: FieldMeta;
+}
+export interface FieldInlineProps {
+    field: FieldMeta;
+    value: unknown;
+    height?: number;
+}
+export interface FieldValueProps {
+    field: FieldMeta;
+    value: unknown;
+    el?: LayoutEl;
+}
+export type PickerSize = 'small' | 'large' | 'modal';
+export type EditorMode = 'popover' | 'modal' | 'inplace' | 'custom';
+export interface FieldPickerProps {
+    field: FieldMeta;
+    draft: unknown;
+    setDraft: (v: unknown) => void;
+    options?: OptionItem[];
+    save: (v?: unknown) => void;
+    cancel: () => void;
+    remove?: () => void;
+    removeLabel?: string;
+}
+export type BoxGeom = 'inline' | 'textarea' | 'title' | 'none';
+export interface FieldKey {
+    value: string;
+    rawValue: unknown;
+    label: string;
+    sort?: string;
+}
+export interface FieldKeyCtx {
+    t: TFn;
+    labelMap?: Map<string, string>;
+}
+export interface FieldRenderer {
+    kinds: string[];
+    layout?: 'block' | 'scalar' | ((field: FieldMeta) => 'block' | 'scalar');
+    childWidth?: string;
+    box?: BoxGeom;
+    Page: FC<ElementRenderProps>;
+    Inline?: FC<FieldInlineProps>;
+    Value?: FC<FieldValueProps>;
+    pickerSize?: PickerSize | ((field: FieldMeta) => PickerSize);
+    Picker?: FC<FieldPickerProps>;
+    editor?: EditorMode;
+    keys?: (value: unknown, field: FieldMeta, ctx: FieldKeyCtx) => FieldKey[];
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@coffer-org/web-ui",
+  "version": "4.0.0",
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./theme.css": "./dist/theme.css"
+  },
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json && cp src/theme.css dist/theme.css",
+    "prepack": "npm run build && node ../../scripts/swap-exports.mjs dist",
+    "postpack": "node ../../scripts/swap-exports.mjs src"
+  },
+  "dependencies": {
+    "@coffer-org/sdk": "^4.0.0",
+    "@ark-ui/react": "^5.37.2",
+    "@base-ui/react": "^1.5.0",
+    "@icons-pack/react-simple-icons": "^13.13.0",
+    "@radix-ui/react-checkbox": "^1.3.4",
+    "@radix-ui/react-dialog": "^1.1.16",
+    "@radix-ui/react-direction": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
+    "@radix-ui/react-label": "^2.1.9",
+    "@radix-ui/react-popover": "^1.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.11",
+    "@radix-ui/react-select": "^2.3.0",
+    "@radix-ui/react-separator": "^1.1.9",
+    "@radix-ui/react-slot": "^1.2.5",
+    "@radix-ui/react-switch": "^1.3.0",
+    "@tabler/icons-react": "^3.44.0",
+    "@tiptap/core": "^3.30.1",
+    "@tiptap/extension-image": "^3.30.1",
+    "@tiptap/extension-list": "^3.30.1",
+    "@tiptap/extension-table": "^3.30.1",
+    "@tiptap/extensions": "^3.30.1",
+    "@tiptap/pm": "^3.30.1",
+    "@tiptap/react": "^3.30.1",
+    "@tiptap/starter-kit": "^3.30.1",
+    "@tiptap/suggestion": "^3.30.1",
+    "@uiw/react-json-view": "^2.0.0-alpha.43",
+    "@uiw/react-textarea-code-editor": "^3.1.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
+    "dompurify": "^3.2.5",
+    "flag-icons": "^7.5.0",
+    "lucide-react": "^1.17.0",
+    "marked": "^15.0.0",
+    "micromark": "^4.0.2",
+    "micromark-extension-gfm": "^3.0.0",
+    "react-colorful": "^5.7.0",
+    "react-day-picker": "^10.0.1",
+    "react-number-format": "^5.4.5",
+    "react-phone-number-input": "^3.4.17",
+    "tailwind-merge": "^3.6.0",
+    "tiptap-markdown": "^0.9.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "i18next": ">=23",
+    "react-i18next": ">=17",
+    "react-router-dom": ">=7",
+    "sonner": ">=2"
+  },
+  "devDependencies": {
+    "zod": "^4.4.3"
+  },
+  "coffer": {
+    "runtime": "browser"
+  }
+}