@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/UploadListItem.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import {
+  CheckCircle,
+  CircleAlert,
+  File,
+  Play,
+  RotateCcw,
+  Square,
+  X
+} from "lucide-react";
+import { IconButton } from "./IconButton.js";
+import { Progress } from "./Progress.js";
+import { formatFileSize } from "./fileSelection.js";
+import s from "./UploadList.module.css";
+const statuses = {
+  ready: "\u7B49\u5F85\u4E0A\u4F20",
+  uploading: "\u6B63\u5728\u4E0A\u4F20",
+  success: "\u4E0A\u4F20\u5B8C\u6210",
+  error: "\u4E0A\u4F20\u5931\u8D25",
+  canceled: "\u5DF2\u53D6\u6D88"
+};
+function UploadListItem({
+  file,
+  disabled = false,
+  showThumbnails = true,
+  onStart,
+  onRetry,
+  onCancel,
+  onRemove,
+  onPreview
+}) {
+  const [localUrl, setLocalUrl] = useState(), [failed, setFailed] = useState(false), image = !!file.type?.startsWith("image/");
+  useEffect(() => {
+    if (!showThumbnails || !image || !file.file) {
+      setLocalUrl(void 0);
+      return;
+    }
+    const url = URL.createObjectURL(file.file);
+    setLocalUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [file.file, image, showThumbnails]);
+  const source = showThumbnails && image ? localUrl || file.url : void 0;
+  useEffect(() => setFailed(false), [source]);
+  const thumbnail = source && !failed ? /* @__PURE__ */ jsx("img", { src: source, alt: "", onError: () => setFailed(true) }) : /* @__PURE__ */ jsx(File, { "aria-hidden": "true" });
+  return /* @__PURE__ */ jsxs("li", { className: s.item, "data-status": file.status, "aria-label": file.name, children: [
+    onPreview && source && !failed ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: s.thumbnail,
+        "aria-label": `\u9884\u89C8 ${file.name}`,
+        onClick: () => onPreview(file, source),
+        children: thumbnail
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: s.thumbnail, "aria-hidden": "true", children: thumbnail }),
+    /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+      /* @__PURE__ */ jsx("div", { className: s.name, "data-selectable": "true", children: file.name }),
+      /* @__PURE__ */ jsxs("div", { className: s.meta, children: [
+        /* @__PURE__ */ jsx("span", { children: formatFileSize(file.size) }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            role: file.status === "error" ? "alert" : "status",
+            className: s.status,
+            children: [
+              file.status === "success" ? /* @__PURE__ */ jsx(CheckCircle, { "aria-hidden": "true" }) : file.status === "error" ? /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true" }) : null,
+              statuses[file.status]
+            ]
+          }
+        ),
+        file.status === "uploading" && /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+          Math.round(Math.min(100, Math.max(0, file.progress || 0))),
+          "%"
+        ] })
+      ] }),
+      file.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: file.progress, label: `${file.name}\u4E0A\u4F20\u8FDB\u5EA6` }),
+      file.status === "error" && file.error && /* @__PURE__ */ jsx("div", { className: s.error, children: file.error })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: s.actions, children: [
+      file.status === "ready" && onStart && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: `\u5F00\u59CB\u4E0A\u4F20 ${file.name}`,
+          disabled: disabled || !file.file,
+          onClick: () => onStart(file.id),
+          children: /* @__PURE__ */ jsx(Play, {})
+        }
+      ),
+      file.status === "uploading" && onCancel && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: `\u53D6\u6D88\u4E0A\u4F20 ${file.name}`,
+          disabled,
+          onClick: () => onCancel(file.id),
+          children: /* @__PURE__ */ jsx(Square, {})
+        }
+      ),
+      (file.status === "error" || file.status === "canceled") && onRetry && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: `\u91CD\u8BD5\u4E0A\u4F20 ${file.name}`,
+          disabled: disabled || !file.file,
+          onClick: () => onRetry(file.id),
+          children: /* @__PURE__ */ jsx(RotateCcw, {})
+        }
+      ),
+      onRemove && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: `\u79FB\u9664\u6587\u4EF6 ${file.name}`,
+          disabled,
+          onClick: () => onRemove(file.id),
+          children: /* @__PURE__ */ jsx(X, {})
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  UploadListItem
+};

package/components/VirtualPickerList.d.ts

@@ -0,0 +1,25 @@
+import { type LucideIconData } from "lucide-react";
+export type PickerCatalogItem = {
+    id: string;
+    label: string;
+    search: string;
+    glyph?: string;
+    icon?: LucideIconData;
+    variants?: {
+        glyph: string;
+        label: string;
+    }[];
+};
+export type PickerCatalogGroup = {
+    id: string;
+    label: string;
+    items: PickerCatalogItem[];
+};
+export declare function VirtualPickerList({ groups, query, value, label, onChoose, onVariants, }: {
+    groups: PickerCatalogGroup[];
+    query: string;
+    value: string;
+    label: string;
+    onChoose(item: PickerCatalogItem): void;
+    onVariants?(item: PickerCatalogItem): void;
+}): import("react").JSX.Element;

package/components/VirtualPickerList.js

@@ -0,0 +1,269 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  memo,
+  useDeferredValue,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Icon } from "lucide-react";
+import { BlockedTab } from "./BlockedTab.js";
+import { reducedMotion } from "./motion.js";
+import s from "./VirtualPickerList.module.css";
+const Cell = memo(function Cell2({
+  item,
+  selected,
+  onChoose,
+  onVariants,
+  index
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: s.cell,
+      "data-picker-index": index,
+      "data-character": item.glyph,
+      "aria-label": item.label,
+      title: item.label,
+      "aria-pressed": selected,
+      onClick: () => onChoose(item),
+      onContextMenu: (e) => {
+        if (item.variants && item.variants.length > 1 && onVariants) {
+          e.preventDefault();
+          onVariants(item);
+        }
+      },
+      onKeyDown: (e) => {
+        if ((e.key === "ContextMenu" || e.shiftKey && e.key === "F10") && onVariants && item.variants && item.variants.length > 1) {
+          e.preventDefault();
+          onVariants(item);
+        }
+      },
+      children: [
+        item.icon ? /* @__PURE__ */ jsx(Icon, { icon: item.icon }) : item.glyph,
+        item.variants && item.variants.length > 1 && /* @__PURE__ */ jsx("span", { className: s.variantMark, "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+function VirtualPickerList({
+  groups,
+  query,
+  value,
+  label,
+  onChoose,
+  onVariants
+}) {
+  const deferred = useDeferredValue(query), viewport = useRef(null), pendingFocus = useRef(void 0), locked = useRef(false), frame = useRef(void 0), [columns, setColumns] = useState(6), [position, setPosition] = useState({ top: 0, height: 300 }), [active, setActive] = useState(groups[0]?.id || "");
+  const filtered = useMemo(() => {
+    const terms = deferred.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    return groups.map((g) => ({
+      ...g,
+      items: terms.length ? g.items.filter(
+        (i) => terms.every((term) => i.search.includes(term))
+      ) : g.items
+    })).filter((g) => g.items.length);
+  }, [groups, deferred]);
+  const layout = useMemo(() => {
+    const rows = [], offsets = /* @__PURE__ */ new Map(), items = [];
+    let top = 0;
+    for (const group of filtered) {
+      offsets.set(group.id, top);
+      rows.push({ top, group: group.id, label: group.label });
+      top += 30;
+      for (let i = 0; i < group.items.length; i += columns) {
+        const slice = group.items.slice(i, i + columns).map((item) => {
+          const index = items.length;
+          items.push({ item, top });
+          return { item, index };
+        });
+        rows.push({ top, group: group.id, items: slice });
+        top += 42;
+      }
+      top += 12;
+    }
+    return { rows, offsets, items, height: top };
+  }, [filtered, columns]);
+  const current = useRef(layout);
+  current.current = layout;
+  const sync = () => {
+    const node = viewport.current;
+    if (!node) return;
+    setPosition({ top: node.scrollTop, height: node.clientHeight });
+    if (!locked.current) {
+      const offsets = [...current.current.offsets];
+      const group = node.scrollTop + node.clientHeight >= node.scrollHeight - 2 ? offsets.at(-1)?.[0] : offsets.filter(([, top]) => top <= node.scrollTop + 32).at(-1)?.[0] || offsets[0]?.[0];
+      if (group) setActive(group);
+    }
+  };
+  useLayoutEffect(() => {
+    const node = viewport.current;
+    const measure = () => {
+      setColumns(Math.max(2, Math.floor((node.clientWidth + 4) / 42)));
+      sync();
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    const end = () => {
+      locked.current = false;
+      sync();
+    };
+    node.addEventListener("scrollend", end);
+    return () => {
+      observer.disconnect();
+      node.removeEventListener("scrollend", end);
+      if (frame.current) cancelAnimationFrame(frame.current);
+    };
+  }, []);
+  useEffect(() => {
+    locked.current = false;
+    viewport.current?.scrollTo({ top: 0, behavior: "instant" });
+    setActive(filtered[0]?.id || "");
+    setPosition((p) => ({ ...p, top: 0 }));
+  }, [deferred]);
+  useLayoutEffect(() => {
+    if (pendingFocus.current === void 0) return;
+    const cell = viewport.current?.querySelector(
+      '[data-picker-index="' + pendingFocus.current + '"]'
+    );
+    if (cell) {
+      cell.focus({ preventScroll: true });
+      pendingFocus.current = void 0;
+    }
+  }, [position, layout]);
+  useLayoutEffect(() => {
+    sync();
+  }, [layout]);
+  const options = useMemo(
+    () => filtered.map((g) => ({ value: g.id, label: g.label })),
+    [filtered]
+  );
+  const jump = useCallback(
+    (id) => {
+      setActive(id);
+      locked.current = true;
+      viewport.current?.scrollTo({
+        top: layout.offsets.get(id) || 0,
+        behavior: reducedMotion() ? "instant" : "smooth"
+      });
+      if (reducedMotion()) {
+        locked.current = false;
+        sync();
+      }
+    },
+    [layout]
+  );
+  const visible = layout.rows.filter(
+    (row) => row.top + 42 >= position.top - 84 && row.top <= position.top + position.height + 84
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: s.body,
+      "data-virtual-picker": true,
+      "aria-busy": query !== deferred || void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          BlockedTab,
+          {
+            orientation: "vertical",
+            label: label + "\u5206\u7C7B",
+            value: active,
+            onChange: jump,
+            options
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: viewport,
+            className: s.viewport,
+            role: "region",
+            "aria-label": label + "\u8FDE\u7EED\u5217\u8868",
+            tabIndex: -1,
+            onScroll: () => {
+              if (frame.current) return;
+              frame.current = requestAnimationFrame(() => {
+                frame.current = void 0;
+                sync();
+              });
+            },
+            onWheel: () => {
+              locked.current = false;
+            },
+            onPointerDown: () => {
+              locked.current = false;
+            },
+            onKeyDown: (event) => {
+              const index = Number(
+                event.target.closest("[data-picker-index]")?.getAttribute("data-picker-index")
+              );
+              if (!Number.isFinite(index)) return;
+              const delta = {
+                ArrowRight: 1,
+                ArrowLeft: -1,
+                ArrowDown: columns,
+                ArrowUp: -columns
+              }[event.key];
+              const next = event.key === "Home" ? 0 : event.key === "End" ? layout.items.length - 1 : delta === void 0 ? void 0 : Math.max(
+                0,
+                Math.min(layout.items.length - 1, index + delta)
+              );
+              if (next === void 0 || !layout.items[next]) return;
+              event.preventDefault();
+              locked.current = false;
+              pendingFocus.current = next;
+              const node = viewport.current, top = layout.items[next].top;
+              if (top < node.scrollTop + 30 || top + 42 > node.scrollTop + node.clientHeight)
+                node.scrollTo({ top: Math.max(0, top - 30), behavior: "instant" });
+              sync();
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: s.spacer, style: { height: layout.height }, children: visible.map(
+                (row) => row.items ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: s.row,
+                    style: {
+                      top: row.top,
+                      gridTemplateColumns: "repeat(" + columns + ",minmax(0,1fr))"
+                    },
+                    children: row.items.map(({ item, index }) => /* @__PURE__ */ jsx(
+                      Cell,
+                      {
+                        item,
+                        index,
+                        selected: value === item.id || value === item.glyph,
+                        onChoose,
+                        onVariants
+                      },
+                      item.id
+                    ))
+                  },
+                  row.group + "-" + row.top
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: s.heading,
+                    style: { top: row.top },
+                    children: row.label
+                  },
+                  row.group
+                )
+              ) }),
+              !filtered.length && /* @__PURE__ */ jsx("p", { className: s.empty, children: "\u6CA1\u6709\u5339\u914D\u7ED3\u679C" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  VirtualPickerList
+};

package/components/VirtualPickerList.module.css

@@ -0,0 +1,93 @@
+.body {
+  --blocked-background: transparent;
+  --blocked-border: 0;
+  --blocked-selected: var(--selected);
+  --blocked-shadow: none;
+  display: flex;
+  gap: 12px;
+  min-height: 0;
+  height: 320px;
+}
+.viewport {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  contain: layout paint;
+  overflow-anchor: none;
+}
+.spacer {
+  position: relative;
+  width: 100%;
+}
+.row {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: grid;
+  gap: 4px;
+  height: 42px;
+  padding-bottom: 4px;
+}
+.heading {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 500;
+}
+.cell {
+  position: relative;
+  display: grid;
+  place-items: center;
+  height: 38px;
+  min-width: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  font-size: 23px;
+  line-height: 1;
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", var(--ui-font);
+}
+.cell svg {
+  width: 19px;
+  height: 19px;
+}
+.cell:hover {
+  background: var(--hover);
+}
+.cell[aria-pressed="true"] {
+  background: var(--selected);
+  border-color: var(--accent);
+}
+.cell:focus-visible {
+  outline-offset: -2px;
+}
+.variantMark {
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--muted);
+  opacity: 0.55;
+}
+.empty {
+  padding: 32px 8px;
+  color: var(--muted);
+  text-align: center;
+}
+@media (max-height: 650px) {
+  .body {
+    height: 240px;
+  }
+}

package/components/appearance.d.ts

@@ -0,0 +1,20 @@
+import type { UITheme, ColorMode } from "./ThemeProvider";
+import type { UIConfig } from "./UIProvider";
+export interface AppearancePreferences {
+    paletteVersion?: 2;
+    designTheme: UITheme;
+    mode: ColorMode;
+    accent: string;
+    lightBackground: string;
+    darkBackground: string;
+    lightForeground: string;
+    darkForeground: string;
+    font: string;
+    density: "comfortable" | "compact";
+    radius: number;
+    motion: boolean;
+    toastPosition: UIConfig["toastPosition"];
+    tooltipPlacement: UIConfig["tooltipPlacement"];
+}
+export declare function appearanceDefaults(designTheme?: UITheme): AppearancePreferences;
+export declare function normalizeAppearance(input: unknown, fallback?: UITheme): AppearancePreferences;

package/components/appearance.js

@@ -0,0 +1,69 @@
+function appearanceDefaults(designTheme = "minimal") {
+  const blue = designTheme === "blue";
+  return {
+    paletteVersion: 2,
+    designTheme,
+    mode: "system",
+    accent: blue ? "#5067b8" : "#303030",
+    lightBackground: "#ffffff",
+    darkBackground: blue ? "#19212f" : "#1e1e1f",
+    lightForeground: blue ? "#25324a" : "#202020",
+    darkForeground: blue ? "#e1e8f4" : "#f4f4f5",
+    font: "system",
+    density: "comfortable",
+    radius: blue ? 9 : 10,
+    motion: true,
+    toastPosition: "bottom-center",
+    tooltipPlacement: "top"
+  };
+}
+function normalizeAppearance(input, fallback = "minimal") {
+  const x = input && typeof input === "object" ? input : {};
+  const d = appearanceDefaults(
+    x.designTheme === "minimal" || x.designTheme === "blue" ? x.designTheme : fallback
+  );
+  const legacyBlue = d.designTheme === "blue" && x.paletteVersion !== 2 ? {
+    accent: "#5269b6",
+    darkBackground: "#19212e",
+    lightForeground: "#263149",
+    darkForeground: "#e0e7f2"
+  } : {};
+  if (["light", "dark", "system"].includes(String(x.mode)))
+    d.mode = x.mode;
+  for (const key of [
+    "accent",
+    "lightBackground",
+    "darkBackground",
+    "lightForeground",
+    "darkForeground"
+  ])
+    if (typeof x[key] === "string" && /^#[\da-f]{6}$/i.test(x[key])) {
+      if (x[key].toLowerCase() !== legacyBlue[key])
+        d[key] = x[key];
+    }
+  if (["system", "Segoe UI", "Microsoft YaHei UI", "sans-serif"].includes(
+    String(x.font)
+  ))
+    d.font = x.font;
+  if (x.density === "comfortable" || x.density === "compact")
+    d.density = x.density;
+  if (typeof x.radius === "number" && Number.isFinite(x.radius))
+    d.radius = Math.min(20, Math.max(0, x.radius));
+  if (typeof x.motion === "boolean") d.motion = x.motion;
+  if ([
+    "top-left",
+    "top-center",
+    "top-right",
+    "bottom-left",
+    "bottom-center",
+    "bottom-right"
+  ].includes(String(x.toastPosition)))
+    d.toastPosition = x.toastPosition;
+  if (["top", "bottom", "left", "right"].includes(String(x.tooltipPlacement)))
+    d.tooltipPlacement = x.tooltipPlacement;
+  return d;
+}
+export {
+  appearanceDefaults,
+  normalizeAppearance
+};

package/components/characterCatalog.d.ts

@@ -0,0 +1,9 @@
+import type { CharacterGroup } from "./CharacterPicker";
+type Kind = "emoji" | "symbols";
+export declare function useCharacterCatalog(kind: Kind): {
+    groups: CharacterGroup[];
+    loading: boolean;
+    error: boolean;
+    retry: () => void;
+};
+export {};

package/components/characterCatalog.js

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+const emojiUrl = new URL("../assets/emoji.json", import.meta.url).href;
+const symbolsUrl = new URL("../assets/symbols.json", import.meta.url).href;
+import metadata from "../assets/character-metadata.json";
+const cache = {}, pending = {};
+const labels = metadata.groups, aliases = metadata.aliases;
+function load(kind) {
+  return pending[kind] ||= fetch(kind === "emoji" ? emojiUrl : symbolsUrl).then((r) => {
+    if (!r.ok) throw Error("\u5B57\u7B26\u52A0\u8F7D\u5931\u8D25");
+    return r.json();
+  }).then((rows) => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const [glyph, title, group, detail] of rows) {
+      if (!glyph.trim()) continue;
+      let item = groups.get(group);
+      if (!item) {
+        item = { name: labels[group]?.[0] || group, items: [] };
+        groups.set(group, item);
+      }
+      item.items.push([
+        glyph,
+        title,
+        [group, detail || "", aliases[glyph] || ""].join(" ")
+      ]);
+    }
+    return cache[kind] = [...groups.values()];
+  }).catch((e) => {
+    delete pending[kind];
+    throw e;
+  });
+}
+function useCharacterCatalog(kind) {
+  const [groups, setGroups] = useState(cache[kind]), [error, setError] = useState(false), [revision, setRevision] = useState(0);
+  useEffect(() => {
+    let active = true;
+    setError(false);
+    load(kind).then((data) => {
+      if (active) setGroups(data);
+    }).catch(() => {
+      if (active) setError(true);
+    });
+    return () => {
+      active = false;
+    };
+  }, [kind, revision]);
+  return {
+    groups: groups || [],
+    loading: !groups && !error,
+    error,
+    retry: () => setRevision((n) => n + 1)
+  };
+}
+export {
+  useCharacterCatalog
+};

package/components/color.d.ts

@@ -0,0 +1,7 @@
+export type HSV = {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare function toHSV(hex: string): HSV;
+export declare function toHex({ h, s, v }: HSV): string;

package/components/color.js

@@ -0,0 +1,18 @@
+function toHSV(hex) {
+  const [r, g, b] = [1, 3, 5].map(
+    (i) => parseInt(hex.slice(i, i + 2), 16) / 255
+  ), max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
+  let h = !d ? 0 : max === r ? (g - b) / d % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+  return { h: (h * 60 + 360) % 360, s: max ? d / max : 0, v: max };
+}
+function toHex({ h, s, v }) {
+  const f = (n) => {
+    const k = (n + h / 60) % 6;
+    return Math.round((v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255).toString(16).padStart(2, "0");
+  };
+  return "#" + f(5) + f(3) + f(1);
+}
+export {
+  toHSV,
+  toHex
+};