@grampro/kit 0.0.0-stage → 2.4.1

package/source/components/dialog/react/props.ts

@@ -0,0 +1,13 @@
+export type DialogSlot =
+  | "root"
+  | "body"
+  | "icon"
+  | "title"
+  | "description"
+  | "input"
+  | "actions"
+  | "confirm"
+  | "cancel";
+
+// Shared with every other component, so class handling cannot drift.
+export { cx } from "../../shared/core/cx";

package/source/components/dialog/styles.css

@@ -0,0 +1,280 @@
+/*
+ * Dialog styles (alert, confirm and prompt).
+ *
+ * Tokens read the shared --gbs-* variables when they are set on an ancestor
+ * (set them on :root to theme every component at once) and fall back to the
+ * same default palette otherwise. Rules are unlayered: they beat a framework
+ * reset on specificity, and lose to anything you pass through `className`.
+ * With Tailwind v4, import this file after the framework and inside its
+ * components layer - see the README.
+ */
+
+.dl-root {
+  --dl-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+  --dl-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --dl-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --dl-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+  --dl-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+  --dl-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
+  --dl-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+  --dl-accent-fg: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
+  --dl-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --dl-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+  --dl-danger-fg: var(--gbs-danger-fg, light-dark(#ffffff, #1c0606));
+  --dl-success: var(--gbs-success, light-dark(#15803d, #4ade80));
+  --dl-warning: var(--gbs-warning, light-dark(#d97706, #fbbf24));
+  --dl-info: var(--gbs-info, var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa))));
+  --dl-shadow: 0 24px 64px -16px light-dark(rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.8));
+  --dl-backdrop: var(--gbs-backdrop, light-dark(rgb(9 9 11 / 0.45), rgb(0 0 0 / 0.65)));
+  --dl-radius: var(--gbs-radius, var(--dg-radius, 12px));
+  --dl-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --dl-width: 420px;
+  --dl-intent: transparent;
+  --dl-duration: 200ms;
+
+  color-scheme: inherit;
+  box-sizing: border-box;
+  width: min(var(--dl-width), 100vw - 32px);
+  max-width: none;
+  max-height: calc(100dvh - 32px);
+  margin: auto;
+  padding: 0;
+  overflow: auto;
+  border: 1px solid var(--dl-border);
+  border-radius: var(--dl-radius);
+  background: var(--dl-bg);
+  color: var(--dl-fg);
+  box-shadow: var(--dl-shadow);
+  font-size: var(--dl-font-size);
+  line-height: 1.5;
+  opacity: 0;
+  scale: 0.96;
+  transition:
+    opacity var(--dl-duration) ease,
+    scale var(--dl-duration) ease,
+    overlay var(--dl-duration) allow-discrete,
+    display var(--dl-duration) allow-discrete;
+  scrollbar-width: var(--gbs-scrollbar-width, thin);
+  scrollbar-color: var(--gbs-scrollbar-thumb, light-dark(#c4c4ca, #3f3f46))
+    var(--gbs-scrollbar-track, transparent);
+}
+.dl-root[open] {
+  opacity: 1;
+  scale: 1;
+}
+@starting-style {
+  .dl-root[open] {
+    opacity: 0;
+    scale: 0.96;
+  }
+}
+
+.dl-root::backdrop {
+  background: var(--dl-backdrop, rgb(9 9 11 / 0.45));
+  opacity: 0;
+  transition:
+    opacity var(--dl-duration) ease,
+    overlay var(--dl-duration) allow-discrete,
+    display var(--dl-duration) allow-discrete;
+}
+.dl-root[open]::backdrop {
+  opacity: 1;
+}
+@starting-style {
+  .dl-root[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+:where(.dark, [data-theme="dark"]) .dl-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .dl-root {
+  color-scheme: light;
+}
+
+:where(.dl-root) *,
+:where(.dl-root) *::before,
+:where(.dl-root) *::after {
+  box-sizing: border-box;
+}
+
+:root:has(.dl-root[open]) {
+  overflow: hidden;
+}
+
+.dl-root[data-size="md"] {
+  --dl-width: 540px;
+}
+.dl-root[data-intent="info"] {
+  --dl-intent: var(--dl-info);
+}
+.dl-root[data-intent="success"] {
+  --dl-intent: var(--dl-success);
+}
+.dl-root[data-intent="warning"] {
+  --dl-intent: var(--dl-warning);
+}
+.dl-root[data-intent="danger"] {
+  --dl-intent: var(--dl-danger);
+}
+
+/* ------------------------------------------------------------ content */
+
+.dl-body {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 20px 20px 16px;
+}
+.dl-icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: color-mix(in oklab, var(--dl-intent), transparent 86%);
+  color: var(--dl-intent);
+}
+.dl-text {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+.dl-title {
+  margin: 0;
+  font-size: 1.15em;
+  font-weight: 600;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+.dl-description {
+  color: var(--dl-muted);
+  overflow-wrap: anywhere;
+}
+
+.dl-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 6px;
+}
+.dl-label {
+  font-weight: 500;
+}
+.dl-input {
+  width: 100%;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--dl-border);
+  border-radius: 8px;
+  background: var(--dl-input-bg);
+  color: inherit;
+  font: inherit;
+}
+.dl-input:focus-visible {
+  outline: 2px solid var(--dl-focus);
+  outline-offset: -1px;
+}
+.dl-input[aria-invalid="true"] {
+  border-color: var(--dl-danger);
+  outline-color: var(--dl-danger);
+}
+.dl-error {
+  margin: 0;
+  color: var(--dl-danger);
+  font-size: 0.92em;
+}
+
+/* ------------------------------------------------------------ actions */
+
+.dl-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--dl-border);
+  background: var(--gbs-header-bg, var(--dg-header-bg, light-dark(#fafafa, #111114)));
+}
+.dl-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 80px;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--dl-border);
+  border-radius: 8px;
+  background: var(--dl-bg);
+  color: inherit;
+  font: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.dl-button:hover:not([aria-disabled="true"]) {
+  background: var(--dl-hover);
+}
+.dl-button[data-variant="primary"] {
+  border-color: var(--dl-accent);
+  background: var(--dl-accent);
+  color: var(--dl-accent-fg);
+}
+.dl-button[data-variant="danger"] {
+  border-color: var(--dl-danger);
+  background: var(--dl-danger);
+  color: var(--dl-danger-fg);
+}
+.dl-button[data-variant="primary"]:hover:not([aria-disabled="true"]) {
+  background: color-mix(in oklab, var(--dl-accent), var(--dl-fg) 12%);
+}
+.dl-button[data-variant="danger"]:hover:not([aria-disabled="true"]) {
+  background: color-mix(in oklab, var(--dl-danger), var(--dl-fg) 12%);
+}
+.dl-button:focus-visible {
+  outline: 2px solid var(--dl-focus);
+  outline-offset: 2px;
+}
+.dl-button[aria-disabled="true"] {
+  opacity: 0.65;
+  cursor: progress;
+}
+
+.dl-spinner {
+  animation: dl-spin 0.7s linear infinite;
+}
+@keyframes dl-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 480px) {
+  .dl-actions {
+    flex-direction: column-reverse;
+  }
+  .dl-button {
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dl-root,
+  .dl-root::backdrop {
+    transition-duration: 0s;
+  }
+  .dl-spinner {
+    animation-duration: 2s;
+  }
+}
+
+@media (forced-colors: active) {
+  .dl-root {
+    border: 1px solid CanvasText;
+  }
+}

package/source/components/file-uploader/README.md

@@ -0,0 +1,99 @@
+# FileUploader
+
+Drop, browse or paste files and upload them in resumable chunks — styled to
+match the DataGrid, Combobox, DatePicker and Toaster. No runtime dependencies
+besides React 19.
+
+- Chunked uploads with per-file progress, pause, resume, retry and cancel.
+- Parallel files, automatic retries with backoff, per-chunk abort.
+- Validation (type, size, count, duplicates, custom) with readable reasons.
+- Image previews that you can turn off, and files already on the server.
+- Works with a plain form: without an endpoint, the files post with the form.
+- Keyboard, screen reader, dark mode and right-to-left support.
+
+## Setup
+
+```ts
+import { FileUploader } from "@/components/file-uploader";
+import "@/components/file-uploader/styles.css";
+```
+
+## Basic usage
+
+```tsx
+<FileUploader
+  label="Attachments"
+  multiple
+  accept=".pdf,image/*"
+  maxSize={20 * 1024 * 1024}
+  endpoint="/api/upload"
+  onUploadComplete={(items) => console.log(items.map((item) => item.response))}
+/>
+```
+
+Files are uploaded when the user presses **Upload**, when you call
+`ref.current.upload()`, or right away with `autoUpload`.
+
+## Upload protocol
+
+Each chunk is a `multipart/form-data` POST with these fields (rename any with
+`fieldNames`; the defaults match the Go `chunk-uploader` package):
+
+| Field | Value |
+| --- | --- |
+| `uploadId` | Same for every chunk of one upload; group chunks by it. |
+| `fileName` | Original file name. |
+| `chunkIndex` | 0-based. Small files are sent as chunk `0` of `1`. |
+| `totalChunks` | Number of chunks. |
+| `fileSize` | Size of the whole file in bytes. |
+| `additionalParams` | JSON from `params`, when given. |
+| `chunk` | The bytes. |
+
+Chunks of one file are sent in order, one at a time. Answer each with a 2xx; the
+body of the last answer is kept as `item.response` (JSON is parsed). 5xx, 408,
+429 and network errors are retried with backoff; other 4xx fail the file.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `multiple` | `boolean` | `false` | Several files; otherwise a new file replaces the current one. |
+| `accept` | `string` | — | `.pdf`, `image/*`, MIME types. |
+| `maxFiles` / `maxSize` / `minSize` | `number` | — | Count, and bytes per file. |
+| `validate` | `(file) => string \| null` | — | Return a message to reject. |
+| `allowDuplicates` | `boolean` | `false` | Allow the same file twice (name, size and date). |
+| `endpoint` | `string \| (request) => string` | — | Where chunks go. |
+| `method`, `headers`, `withCredentials` | — | `POST` | Request options; `headers` may be an async function. |
+| `params` | `object \| (file) => object` | — | Sent as `additionalParams`. |
+| `fieldNames` | `Partial<ChunkFieldNames>` | Go names | Rename form fields. |
+| `parseResponse` | `(body, xhr) => unknown` | JSON, else text | Custom response parsing. |
+| `transport` | `(request) => Promise` | HTTP | Replace the sender entirely. |
+| `chunkSize` | `number` | 5 MiB | Bytes per request. |
+| `concurrency` | `number` | `3` | Files uploading at once. |
+| `retries` / `retryDelay` | `number` | `3` / `1000` | Attempts per chunk; delay doubles each time. |
+| `autoUpload` | `boolean` | `false` | Upload as soon as files are added. |
+| `preview` | `boolean` | `true` | Image thumbnails. |
+| `existingFiles` | `ExistingFile[]` | — | Files already stored, with download links. |
+| `onRemoveExisting` | `(file) => void` | — | Shows a remove button on existing files. |
+| `removable` | `boolean` | `true` | Remove buttons. |
+| `name` | `string` | — | Form field. With an endpoint, stored ids post; without, the files do. |
+| `getFileId` | `(item) => string` | from response | The id posted for an uploaded file. |
+| `label`, `description`, `error`, `required`, `disabled`, `size`, `locale` | — | — | Field and display options. |
+| `className`, `classNames`, `style`, `localeText` | — | — | Slots: `root`, `label`, `dropzone`, `rejections`, `list`, `item`, `thumb`, `progress`, `actions`, `footer`. |
+| `onChange`, `onRejected`, `onFileSuccess`, `onFileError`, `onUploadComplete` | — | — | Events. |
+| `ref` | `Ref<FileUploaderHandle>` | — | `open`, `addFiles`, `upload`, `pause`, `cancel`, `clear`, `getFiles`, `getItems`. |
+
+## Headless use
+
+`useFileUploader(config)` returns `{ store, items, rejections }` for a custom UI.
+The framework-free core — `createUploaderStore`, `createHttpTransport`,
+`buildChunkForm`, `partitionFiles`, `matchesAccept`, `formatBytes`, `summarize` —
+has no React imports.
+
+## Known limits
+
+- Chunks of one file are sequential; parallelism is across files.
+- Pausing aborts the chunk in flight and sends it again on resume.
+- Progress lives in memory: reloading the page loses it (the server may still
+  hold the chunks under the `uploadId`).
+- Dropped folders are not expanded.

package/source/components/file-uploader/core/format.ts

@@ -0,0 +1,79 @@
+import type { FileKind } from "./types";
+
+const UNITS = ["kilobyte", "megabyte", "gigabyte", "terabyte"] as const;
+const formatters = new Map<string, Intl.NumberFormat>();
+
+function formatter(locale: string | undefined, unit?: (typeof UNITS)[number]) {
+  const key = `${locale ?? ""}|${unit ?? "plain"}`;
+  let found = formatters.get(key);
+  if (!found) {
+    found = new Intl.NumberFormat(
+      locale,
+      unit
+        ? { style: "unit", unit, unitDisplay: "short", maximumFractionDigits: 1 }
+        : { maximumFractionDigits: 0 },
+    );
+    formatters.set(key, found);
+  }
+  return found;
+}
+
+/** `1536` → `1.5 kB`, localized. Steps of 1024, as file managers show sizes. */
+export function formatBytes(bytes: number, locale?: string): string {
+  let value = Math.max(0, bytes);
+  // Intl spells plain bytes out ("512 byte"), so they get a short suffix instead.
+  if (value < 1024) return `${formatter(locale).format(value)} B`;
+  let unit = -1;
+  while (value >= 1024 && unit < UNITS.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  return formatter(locale, UNITS[unit]).format(value);
+}
+
+const EXTENSIONS: Record<Exclude<FileKind, "other">, readonly string[]> = {
+  image: ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "avif", "heic", "ico"],
+  video: ["mp4", "mov", "webm", "mkv", "avi", "m4v"],
+  audio: ["mp3", "wav", "ogg", "m4a", "flac", "aac"],
+  pdf: ["pdf"],
+  spreadsheet: ["xls", "xlsx", "csv", "ods", "tsv"],
+  document: ["doc", "docx", "txt", "rtf", "odt", "md", "ppt", "pptx"],
+  archive: ["zip", "rar", "7z", "tar", "gz", "tgz"],
+};
+
+/** Picks an icon family from the MIME type, falling back to the extension. */
+export function fileKind(file: { name: string; type?: string }): FileKind {
+  const type = (file.type ?? "").toLowerCase();
+  if (type.startsWith("image/")) return "image";
+  if (type.startsWith("video/")) return "video";
+  if (type.startsWith("audio/")) return "audio";
+  if (type.includes("pdf")) return "pdf";
+  if (type.includes("spreadsheet") || type.includes("excel") || type === "text/csv") {
+    return "spreadsheet";
+  }
+
+  const extension = file.name.toLowerCase().split(".").pop() ?? "";
+  for (const [kind, list] of Object.entries(EXTENSIONS)) {
+    if (list.includes(extension)) return kind as FileKind;
+  }
+  return "other";
+}
+
+const get = (value: unknown, key: string): unknown =>
+  value !== null && typeof value === "object" ? (value as Record<string, unknown>)[key] : undefined;
+
+const asId = (value: unknown) =>
+  typeof value === "string" || typeof value === "number" ? String(value) : undefined;
+
+/**
+ * Finds the stored file's id in common response shapes: `id`, `fileId`,
+ * `documentId`, or `metadata.storedName` as returned by the Go chunk-uploader.
+ */
+export function readFileId(response: unknown): string | undefined {
+  return (
+    asId(get(response, "id")) ??
+    asId(get(response, "fileId")) ??
+    asId(get(response, "documentId")) ??
+    asId(get(get(response, "metadata"), "storedName"))
+  );
+}

package/source/components/file-uploader/core/index.ts

@@ -0,0 +1,26 @@
+// Framework-free: validation, chunk planning, the HTTP transport and the upload
+// queue run without React, so they can be reused in a worker, a script or a test.
+export {
+  chunkCount,
+  createUploaderStore,
+  createUploadId,
+  DEFAULT_CHUNK_SIZE,
+  DEFAULT_CONCURRENCY,
+  DEFAULT_RETRIES,
+  DEFAULT_RETRY_DELAY,
+  summarize,
+} from "./store";
+export type { AddResult, UploaderConfig, UploaderStore } from "./store";
+export {
+  abortError,
+  buildChunkForm,
+  createHttpTransport,
+  DEFAULT_FIELD_NAMES,
+  isRetryable,
+  UploadHttpError,
+} from "./transport";
+export type { ChunkFieldNames, HttpTransportOptions, UploadParams } from "./transport";
+export { fileKey, matchesAccept, partitionFiles } from "./validate";
+export type { Partitioned, ValidationRules } from "./validate";
+export { fileKind, formatBytes, readFileId } from "./format";
+export type * from "./types";