@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/UploadList.module.css

@@ -0,0 +1,130 @@
+.root {
+  min-width: 0;
+}
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.item {
+  min-height: 84px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  padding: 14px 0;
+  animation: itemIn 140ms var(--ease);
+}
+.item + .item {
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}
+.thumbnail {
+  display: grid;
+  place-items: center;
+  flex: 0 0 42px;
+  width: 42px;
+  height: 42px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--soft);
+  color: var(--muted);
+  padding: 0;
+  overflow: hidden;
+}
+button.thumbnail {
+  cursor: pointer;
+}
+.thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.thumbnail > svg {
+  width: 20px;
+  height: 20px;
+}
+.body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 20px;
+}
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 11px;
+  color: var(--muted);
+  line-height: 18px;
+}
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.status svg {
+  width: 13px;
+  height: 13px;
+}
+.item[data-status="success"] .status {
+  color: var(--success);
+}
+.item[data-status="error"] .status,
+.error {
+  color: var(--danger);
+}
+.error {
+  font-size: 11px;
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.empty {
+  color: var(--muted);
+  font-size: 12px;
+  padding: 18px 0;
+  text-align: center;
+}
+@keyframes itemIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (max-width: 620px) {
+  .item {
+    gap: 8px;
+  }
+  .actions {
+    flex-direction: column;
+  }
+  .thumbnail {
+    width: 36px;
+    height: 36px;
+    flex-basis: 36px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    animation: none;
+  }
+}

package/components/UploadListItem.d.ts

@@ -0,0 +1,13 @@
+import type { UploadFile } from "./uploadTypes";
+export type UploadItemActions = {
+    disabled?: boolean;
+    showThumbnails?: boolean;
+    onStart?(id: string): void;
+    onRetry?(id: string): void;
+    onCancel?(id: string): void;
+    onRemove?(id: string): void;
+    onPreview?(file: UploadFile, source?: string): void;
+};
+export declare function UploadListItem({ file, disabled, showThumbnails, onStart, onRetry, onCancel, onRemove, onPreview, }: UploadItemActions & {
+    file: UploadFile;
+}): import("react").JSX.Element;

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,89 @@
+.body {
+  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,19 @@
+import type { UITheme, ColorMode } from "./ThemeProvider";
+import type { UIConfig } from "./UIProvider";
+export interface AppearancePreferences {
+    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;