@tutti-os/ui-system 0.0.1

package/dist/styles/base.css

@@ -0,0 +1,170 @@
+@import "tw-animate-css";
+
+@layer base {
+  * {
+    box-sizing: border-box;
+    scrollbar-width: none;
+  }
+
+  *::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  html {
+    color-scheme: light;
+  }
+
+  :root {
+    --modal-open-dur: 250ms;
+    --modal-close-dur: 150ms;
+    --modal-scale: 0.96;
+    --modal-scale-close: 0.96;
+    --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --dropdown-open-dur: 250ms;
+    --dropdown-close-dur: 150ms;
+    --dropdown-pre-scale: 0.97;
+    --dropdown-closing-scale: 0.99;
+    --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  html[data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  html[data-theme="light"] {
+    color-scheme: light;
+  }
+
+  body {
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+    background:
+      radial-gradient(
+        circle at top left,
+        color-mix(in srgb, var(--primary) 10%, transparent) 0%,
+        transparent 38%
+      ),
+      radial-gradient(
+        circle at top right,
+        color-mix(in srgb, var(--accent) 8%, transparent) 0%,
+        transparent 34%
+      ),
+      linear-gradient(180deg, var(--background) 0%, var(--background-soft) 100%);
+    color: var(--foreground);
+    font-family: var(--font-sans-system);
+    font-weight: var(--font-weight-regular);
+    line-height: 1.5;
+    text-rendering: optimizeLegibility;
+  }
+
+  :where(:lang(zh), [lang^="zh"]) {
+    --font-sans-system: var(--font-sans-cjk);
+    --font-sans: var(--font-sans-cjk);
+    --font-ui: var(--font-sans-cjk);
+    --font-display: var(--font-ui);
+  }
+
+  body,
+  #app {
+    min-height: 100vh;
+  }
+
+  @keyframes nextop-dropdown-open {
+    from {
+      transform: scale(var(--dropdown-pre-scale));
+      opacity: 0;
+    }
+
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes nextop-dropdown-close {
+    from {
+      transform: scale(1);
+      opacity: 1;
+    }
+
+    to {
+      transform: scale(var(--dropdown-closing-scale));
+      opacity: 0;
+    }
+  }
+
+  .t-dropdown {
+    transform: scale(var(--dropdown-pre-scale));
+    opacity: 0;
+    pointer-events: none;
+    will-change: transform, opacity;
+  }
+
+  .t-dropdown[data-state="open"] {
+    transform: scale(1);
+    opacity: 1;
+    pointer-events: auto;
+    animation: nextop-dropdown-open var(--dropdown-open-dur)
+      var(--dropdown-ease) both;
+  }
+
+  .t-dropdown[data-state="closed"] {
+    transform: scale(var(--dropdown-closing-scale));
+    opacity: 0;
+    pointer-events: none;
+    animation: nextop-dropdown-close var(--dropdown-close-dur)
+      var(--dropdown-ease) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-dropdown {
+      animation: none !important;
+    }
+  }
+
+  button,
+  input,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  button:not(:disabled) {
+    cursor: pointer;
+  }
+
+  svg {
+    flex: none;
+  }
+
+  :where(:focus-visible) {
+    outline: none;
+  }
+}
+
+@layer utilities {
+  :where(:lang(zh), [lang^="zh"]).font-medium,
+  :where(:lang(zh), [lang^="zh"]) :where(.font-medium),
+  :where(:lang(zh), [lang^="zh"]).font-semibold,
+  :where(:lang(zh), [lang^="zh"]) :where(.font-semibold) {
+    font-weight: var(--font-weight-emphasis-cjk);
+  }
+
+  :where(:lang(zh), [lang^="zh"])[data-slot="button"],
+  :where(:lang(zh), [lang^="zh"]) :where([data-slot="button"]) {
+    font-weight: var(--font-weight-emphasis-cjk);
+  }
+
+  :where(:lang(zh), [lang^="zh"])[data-slot="dialog-content"]
+    :where(.font-medium, .font-semibold),
+  :where(:lang(zh), [lang^="zh"])
+    :where([data-slot="dialog-content"])
+    :where(.font-medium, .font-semibold),
+  :where(:lang(zh), [lang^="zh"])[data-slot="dialog-title"],
+  :where(:lang(zh), [lang^="zh"]) :where([data-slot="dialog-title"]) {
+    font-weight: 500;
+  }
+}

package/dist/styles/index.css

@@ -0,0 +1,4 @@
+@import "@fontsource-variable/lexend";
+@import "./theme.css";
+@import "./semantic.css";
+@import "./base.css";

package/dist/styles/semantic.css

@@ -0,0 +1,50 @@
+@theme inline {
+  --font-sans: var(--font-sans-system);
+  --font-mono: var(--font-mono-system);
+
+  --color-background: var(--background);
+  --color-background-panel: var(--background-panel);
+  --color-background-fronted: var(--background-fronted);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-disabled: var(--text-disabled);
+  --color-white-stationary: var(--white-stationary);
+  --color-black-stationary: var(--black-stationary);
+  --color-accent: var(--accent);
+  --color-accent-claude: var(--accent-claude);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-border-1: var(--border-1);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-panel: var(--panel);
+  --color-panel-foreground: var(--panel-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-transparency-block: var(--transparency-block);
+  --color-transparency-hover: var(--transparency-hover);
+
+  --radius-sm: calc(var(--radius) - 0.375rem);
+  --radius-md: calc(var(--radius) - 0.25rem);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 0.25rem);
+
+  --shadow-soft: var(--shadow-soft);
+  --shadow-panel: var(--shadow-panel);
+  --shadow-side-panel: var(--shadow-side-panel);
+}

package/dist/styles/theme.css

@@ -0,0 +1,366 @@
+:root {
+  --font-sans-system:
+    "Lexend Variable", "Lexend", -apple-system, BlinkMacSystemFont,
+    "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC",
+    "Source Han Sans SC", system-ui, sans-serif;
+  --font-sans-cjk:
+    "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC",
+    "Source Han Sans SC", -apple-system, BlinkMacSystemFont, system-ui,
+    sans-serif;
+  --font-ui: var(--font-sans-system);
+  --font-display: var(--font-ui);
+  --font-mono-system:
+    "Geist Mono", "SF Mono", "IBM Plex Mono", "JetBrains Mono", monospace;
+  --font-weight-regular: 400;
+  --font-weight-regular-cjk: 400;
+  --font-weight-emphasis-cjk: 500;
+
+  --radius: 0.625rem;
+
+  --background: oklch(0.986 0.004 84);
+  --background-panel: rgb(248 250 252);
+  --background-fronted: rgb(255 255 255 / 1);
+  --background-soft: oklch(0.968 0.006 84);
+  --foreground: oklch(0.248 0.016 258);
+  --text-primary: rgb(60 60 60);
+  --text-primary-hover: rgb(60 60 60 / 90%);
+  --text-tertiary: rgb(60 60 60 / 50%);
+  --text-placeholder: rgb(60 60 60 / 30%);
+  --text-inverted: rgb(255 255 255);
+  --white-stationary: rgb(255 255 255);
+  --black-stationary: rgb(0 0 0);
+  --toast-neutral-bg: var(--black-stationary);
+  --toast-neutral-fg: var(--white-stationary);
+  --toast-neutral-border: rgb(255 255 255 / 14%);
+  --toast-shadow-color: rgb(19 24 38 / 18%);
+
+  --card: oklch(0.995 0.003 84 / 88%);
+  --card-foreground: var(--foreground);
+  --popover: oklch(0.998 0.002 84 / 96%);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.57 0.112 248);
+  --primary-foreground: oklch(0.987 0.002 84);
+  --secondary: oklch(0.956 0.006 252);
+  --secondary-foreground: oklch(0.314 0.018 258);
+  --muted: oklch(0.958 0.005 84);
+  --muted-foreground: oklch(0.528 0.013 258);
+  --text-secondary: rgb(60 60 60 / 70%);
+  --text-disabled: rgb(60 60 60 / 30%);
+  --rich-text-mention-app: rgb(191, 90, 242);
+  --rich-text-mention-issue: rgb(191, 90, 242);
+  --rich-text-mention-session: rgb(34, 197, 94);
+  --folder: rgb(80, 175, 238);
+  --rich-text-folder: rgb(80, 175, 238);
+  --rich-text-mention-file: rgb(80, 175, 238);
+  --accent: rgb(65 130 245);
+  --accent-claude: rgb(251 111 62);
+  --accent-foreground: oklch(0.302 0.02 258);
+  --destructive: oklch(0.62 0.21 25);
+  --destructive-foreground: oklch(0.985 0.004 25);
+  --state-danger: rgb(220 38 38);
+  --state-danger-hover: color-mix(
+    in srgb,
+    var(--state-danger) 90%,
+    transparent
+  );
+  --state-success: rgb(34 197 94);
+  --state-warning: rgb(234 121 8);
+  --on-danger: rgb(220 38 38 / 8%);
+  --on-danger-hover: color-mix(
+    in srgb,
+    var(--on-danger) 92%,
+    var(--state-danger)
+  );
+  --border: oklch(0.904 0.005 252);
+  --border-1: rgb(60 60 60 / 8%);
+  --border-2: rgb(60 60 60 / 8%);
+  --line-1: var(--border-1);
+  --line-2: var(--border-2);
+  --line-focus-window: rgb(60 60 60 / 12%);
+  --border-focus: rgb(65 130 245 / 24%);
+  --input: oklch(0.936 0.006 252);
+  --ring: oklch(0.662 0.072 248);
+  --accent-bg: color-mix(
+    in srgb,
+    var(--background-fronted) 88%,
+    var(--accent) 12%
+  );
+
+  --panel: oklch(0.975 0.004 84 / 92%);
+  --panel-foreground: var(--foreground);
+  --success: oklch(0.642 0.124 158);
+  --success-foreground: oklch(0.985 0.004 145);
+  --warning: oklch(0.774 0.116 86);
+  --warning-foreground: oklch(0.29 0.05 84);
+  --backdrop: rgb(255 255 255 / 60%);
+
+  --shadow-soft: 0 10px 28px rgb(0 0 0 / 5%);
+  --shadow-panel: 0 20px 44px rgb(0 0 0 / 8%);
+  --shadow-side-panel: -20px 0px 64px rgb(0 0 0 / 16%);
+  --shadow-elevated: rgb(0 0 0 / 8%);
+  --transparency-block: rgb(60 60 60 / 4%);
+  --transparency-hover: rgb(60 60 60 / 6%);
+  --transparency-active: rgb(60 60 60 / 6%);
+
+  --z-workbench-chrome: 100100;
+  --z-workbench-genie: 100150;
+  --z-popover: 100200;
+  --z-panel: 100500;
+  --z-panel-popover: 100550;
+  --z-toast: 100560;
+  --z-dialog-overlay: 100600;
+  --z-dialog: 100610;
+  --z-dialog-popover: 100620;
+  --z-tooltip: 100700;
+
+  --workbench-canvas-bg: oklch(0.948 0.006 84);
+  --workbench-surface-background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--workbench-accent) 5%, transparent),
+      transparent 34%
+    ),
+    radial-gradient(
+      circle at 18% 12%,
+      color-mix(in srgb, var(--workbench-accent) 8%, transparent),
+      transparent 28%
+    ),
+    var(--workbench-canvas-bg);
+  --workbench-foreground: var(--foreground);
+  --workbench-muted-foreground: var(--muted-foreground);
+  --workbench-chrome-foreground: color-mix(
+    in srgb,
+    var(--foreground) 72%,
+    transparent
+  );
+  --workbench-chrome-muted: color-mix(
+    in srgb,
+    var(--foreground) 52%,
+    transparent
+  );
+  --workbench-chrome-hover-bg: var(--transparency-block);
+  --workbench-panel: oklch(0.995 0.003 84 / 94%);
+  --workbench-window-bg: color-mix(
+    in srgb,
+    var(--workbench-panel) 92%,
+    transparent
+  );
+  --workbench-node-surface: color-mix(
+    in srgb,
+    var(--workbench-window-bg) 96%,
+    var(--workbench-panel)
+  );
+  --workbench-window-header-bg: color-mix(
+    in srgb,
+    var(--workbench-panel) 86%,
+    transparent
+  );
+  --workbench-field-bg: color-mix(
+    in srgb,
+    var(--workbench-window-bg) 92%,
+    white
+  );
+  --workbench-window-backdrop-filter: blur(40px) saturate(1.08);
+  --workbench-border: rgba(255, 255, 255, 0.2);
+  --workbench-accent: var(--primary);
+  --workbench-focused-border: rgb(255 255 255 / 68%);
+  --workbench-scrim: color-mix(in srgb, var(--card) 78%, transparent);
+  --workbench-window-elevation: 0 18px 44px rgb(0 0 0 / 26%);
+  --workbench-control-hover-bg: color-mix(
+    in srgb,
+    var(--workbench-foreground) 9%,
+    transparent
+  );
+  --workbench-dock-shadow:
+    0 14px 34px rgb(0 0 0 / 10%), 0 1px 0 rgb(255 255 255 / 60%);
+  --workbench-snap-guide: color-mix(in srgb, var(--primary) 18%, transparent);
+  --workbench-snap-guide-border: color-mix(
+    in srgb,
+    var(--workbench-accent) 70%,
+    transparent
+  );
+  --workbench-snap-guide-shadow: 0 0 0 1px
+    color-mix(in srgb, var(--workbench-accent) 28%, transparent);
+}
+
+:root[data-theme="dark"] {
+  --background: oklch(0.192 0.008 255);
+  --background-panel: rgb(42 42 43);
+  --background-fronted: rgb(51 51 51 / 1);
+  --background-soft: oklch(0.224 0.01 255);
+  --foreground: oklch(0.955 0.004 84);
+  --text-primary: rgb(255 255 255);
+  --text-primary-hover: rgb(255 255 255 / 90%);
+  --text-tertiary: rgb(255 255 255 / 50%);
+  --text-placeholder: rgb(255 255 255 / 30%);
+  --text-inverted: rgb(60 60 60);
+  --white-stationary: rgb(255 255 255);
+  --black-stationary: rgb(0 0 0);
+  --toast-neutral-bg: var(--white-stationary);
+  --toast-neutral-fg: var(--black-stationary);
+  --toast-neutral-border: rgb(0 0 0 / 10%);
+  --toast-shadow-color: rgb(0 0 0 / 24%);
+
+  --card: oklch(0.252 0.01 255 / 88%);
+  --card-foreground: var(--foreground);
+  --popover: oklch(0.264 0.01 255 / 95%);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.714 0.086 248);
+  --primary-foreground: oklch(0.208 0.012 255);
+  --secondary: oklch(0.292 0.009 255);
+  --secondary-foreground: var(--foreground);
+  --muted: oklch(0.282 0.008 255);
+  --muted-foreground: oklch(0.734 0.012 255);
+  --text-secondary: rgb(255 255 255 / 70%);
+  --text-disabled: rgb(255 255 255 / 30%);
+  --rich-text-mention-app: rgb(191, 90, 242);
+  --rich-text-mention-issue: rgb(191, 90, 242);
+  --rich-text-mention-session: rgb(74, 222, 128);
+  --folder: rgb(80, 175, 238);
+  --rich-text-folder: rgb(80, 175, 238);
+  --rich-text-mention-file: rgb(80, 175, 238);
+  --accent: rgb(79 143 255);
+  --accent-claude: rgb(251 111 62);
+  --accent-foreground: var(--foreground);
+  --destructive: oklch(0.672 0.172 25);
+  --destructive-foreground: oklch(0.19 0.01 25);
+  --state-danger: rgb(239 68 68);
+  --state-danger-hover: color-mix(
+    in srgb,
+    var(--state-danger) 90%,
+    transparent
+  );
+  --state-success: rgb(74 222 128);
+  --state-warning: rgb(251 146 60);
+  --on-danger: rgb(239 68 68 / 8%);
+  --on-danger-hover: color-mix(
+    in srgb,
+    var(--on-danger) 82%,
+    var(--state-danger)
+  );
+  --border: oklch(0.352 0.012 255);
+  --border-1: rgb(255 255 255 / 12%);
+  --border-2: rgb(255 255 255 / 8%);
+  --line-1: var(--border-1);
+  --line-2: var(--border-2);
+  --line-focus-window: rgb(255 255 255 / 20%);
+  --border-focus: rgb(79 143 255 / 24%);
+  --input: oklch(0.318 0.011 255);
+  --ring: oklch(0.728 0.078 248);
+  --accent-bg: color-mix(
+    in srgb,
+    var(--background-fronted) 88%,
+    var(--accent) 12%
+  );
+
+  --panel: oklch(0.236 0.009 255 / 92%);
+  --panel-foreground: var(--foreground);
+  --success: oklch(0.702 0.124 158);
+  --success-foreground: oklch(0.172 0.01 158);
+  --warning: oklch(0.82 0.108 86);
+  --warning-foreground: oklch(0.204 0.02 84);
+  --backdrop: rgb(0 0 0 / 60%);
+
+  --shadow-soft: 0 14px 32px rgb(0 0 0 / 24%);
+  --shadow-panel: 0 24px 52px rgb(0 0 0 / 34%);
+  --shadow-side-panel: -20px 0px 64px rgb(0 0 0 / 32%);
+  --shadow-elevated: rgb(0 0 0 / 50%);
+  --transparency-block: rgb(255 255 255 / 10%);
+  --transparency-hover: rgb(255 255 255 / 14%);
+  --transparency-active: rgb(255 255 255 / 16%);
+
+  --workbench-canvas-bg: oklch(0.172 0.008 255);
+  --workbench-surface-background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--workbench-accent) 10%, transparent),
+      transparent 34%
+    ),
+    radial-gradient(
+      circle at 18% 12%,
+      color-mix(in srgb, var(--workbench-accent) 12%, transparent),
+      transparent 28%
+    ),
+    var(--workbench-canvas-bg);
+  --workbench-foreground: var(--foreground);
+  --workbench-muted-foreground: var(--muted-foreground);
+  --workbench-chrome-foreground: color-mix(
+    in srgb,
+    var(--foreground) 82%,
+    transparent
+  );
+  --workbench-chrome-muted: color-mix(
+    in srgb,
+    var(--foreground) 64%,
+    transparent
+  );
+  --workbench-chrome-hover-bg: var(--transparency-block);
+  --workbench-panel: oklch(0.236 0.009 255 / 90%);
+  --workbench-window-bg: color-mix(
+    in srgb,
+    var(--workbench-panel) 92%,
+    transparent
+  );
+  --workbench-node-surface: color-mix(
+    in srgb,
+    var(--workbench-window-bg) 96%,
+    var(--workbench-panel)
+  );
+  --workbench-window-header-bg: color-mix(
+    in srgb,
+    var(--workbench-panel) 86%,
+    transparent
+  );
+  --workbench-field-bg: color-mix(
+    in srgb,
+    var(--workbench-window-bg) 92%,
+    black
+  );
+  --workbench-window-backdrop-filter: blur(40px) saturate(1.08);
+  --workbench-border: rgb(255 255 255 / 12%);
+  --workbench-accent: var(--primary);
+  --workbench-focused-border: rgb(255 255 255 / 32%);
+  --workbench-scrim: color-mix(in srgb, var(--card) 78%, transparent);
+  --workbench-window-elevation: 0 14px 32px rgb(0 0 0 / 42%);
+  --workbench-control-hover-bg: color-mix(
+    in srgb,
+    var(--workbench-foreground) 11%,
+    transparent
+  );
+  --workbench-dock-shadow:
+    0 18px 44px rgb(0 0 0 / 42%), 0 1px 0 rgb(255 255 255 / 10%);
+  --workbench-snap-guide: color-mix(in srgb, var(--primary) 18%, transparent);
+  --workbench-snap-guide-border: color-mix(
+    in srgb,
+    var(--workbench-accent) 72%,
+    transparent
+  );
+  --workbench-snap-guide-shadow: 0 0 0 1px
+    color-mix(in srgb, var(--workbench-accent) 30%, transparent);
+}
+
+[data-workbench-wallpaper-appearance="dark"] {
+  --transparency-block: rgb(255 255 255 / 12%);
+  --transparency-hover: rgb(255 255 255 / 16%);
+  --workbench-chrome-foreground: rgb(255 255 255 / 88%);
+  --workbench-chrome-muted: rgb(255 255 255 / 70%);
+  --workbench-chrome-hover-bg: var(--transparency-block);
+}
+
+[data-workbench-wallpaper-appearance="light"] {
+  --transparency-block: rgb(60 60 60 / 4%);
+  --transparency-hover: rgb(60 60 60 / 6%);
+  --workbench-chrome-foreground: color-mix(
+    in srgb,
+    var(--foreground) 68%,
+    transparent
+  );
+  --workbench-chrome-muted: color-mix(
+    in srgb,
+    var(--foreground) 52%,
+    transparent
+  );
+  --workbench-chrome-hover-bg: var(--transparency-block);
+}

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/utils.js

@@ -0,0 +1,7 @@
+import {
+  cn
+} from "./chunk-DGPY4WP3.js";
+export {
+  cn
+};
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}