@theaiplatform/miniapp-sdk 0.0.0 → 0.0.2

package/dist/ui/tailwind.css

@@ -0,0 +1,113 @@
+/**
+ * @capability shared-infra
+ *
+ * Tailwind v4 theme contract for miniapps that already use Tailwind. The
+ * public SDK rewrites the sibling theme import when it copies this file.
+ */
+@import './theme.css';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'Chivo Mono', ui-monospace, SFMono-Regular, monospace;
+  --color-background: var(--background);
+  --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-popover-accent: var(--popover-accent);
+  --color-tooltip-chrome: var(--tooltip-chrome);
+  --color-tooltip-chrome-foreground: var(--tooltip-chrome-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-accent: var(--primary-accent);
+  --color-primary-accent-foreground: var(--primary-accent-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-hover: var(--secondary-hover);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-hover: var(--destructive-hover);
+  --color-destructive-accent: var(--destructive-accent);
+  --color-destructive-accent-foreground: var(--destructive-accent-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-accent: var(--warning-accent);
+  --color-warning-accent-foreground: var(--warning-accent-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-accent: var(--success-accent);
+  --color-success-accent-foreground: var(--success-accent-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-accent: var(--info-accent);
+  --color-info-accent-foreground: var(--info-accent-foreground);
+  --color-border: var(--border);
+  --color-border-focus: var(--border-focus);
+  --color-border-error: var(--border-error);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-input-border-focus: var(--input-border-focus);
+  --color-input-border-error: var(--input-border-error);
+  --color-ring: var(--ring);
+  --color-ring-focus: var(--ring-focus);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-subheader: var(--text-subheader);
+  --color-text-contrast: var(--text-contrast);
+  --color-interactive-default: var(--interactive-default);
+  --color-interactive-hover: var(--interactive-hover);
+  --color-interactive-active: var(--interactive-active);
+  --color-interactive-focus: var(--interactive-focus);
+  --color-interactive-card-hover: var(--interactive-card-hover);
+  --color-surface-border-1: var(--surface-border-1);
+  --color-surface-border-2: var(--surface-border-2);
+  --color-surface-level-1: var(--surface-level-1);
+  --color-surface-level-1-border: var(--surface-level-1-border);
+  --color-surface-level-2: var(--surface-level-2);
+  --color-surface-level-minus-1: var(--surface-level-minus-1);
+  --color-surface-tag: var(--surface-tag);
+  --color-workspace-divider: var(--workspace-divider);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-surface: var(--sidebar-surface);
+  --color-button-tertiary-default: var(--button-tertiary-default);
+  --color-button-tertiary-hover: var(--button-tertiary-hover);
+  --color-button-borderless-default: var(--button-borderless-default);
+  --color-button-borderless-hover: var(--button-borderless-hover);
+  --color-button-borderless-active: var(--button-borderless-active);
+  --color-icon-active: var(--icon-active);
+  --color-icon-secondary: var(--icon-secondary);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --shadow-surface-sm: var(--shadow-surface-sm-value);
+  --shadow-surface-md: var(--shadow-surface-md-value);
+  --shadow-popover: var(--shadow-popover-value);
+  --shadow-button-primary: var(--shadow-button-primary-value);
+  --shadow-button-secondary: var(--shadow-button-secondary-value);
+  --shadow-button-secondary-hover: var(--shadow-button-secondary-hover-value);
+  --shadow-button-outline: var(--shadow-button-outline-value);
+  --shadow-button-outline-hover: var(--shadow-button-outline-hover-value);
+  --shadow-input-rest: var(--shadow-input-rest-value);
+  --shadow-input-focus: var(--shadow-input-focus-value);
+  --z-popover: 200;
+  --z-modal: 200;
+  --z-tooltip: 250;
+}
+
+@source '../ui.js';
+@source './wasm.js';

package/dist/ui/theme.css

@@ -0,0 +1,335 @@
+/**
+ * @capability shared-infra
+ *
+ * Theme contract for portable miniapps rendered in an isolated frame. Keep
+ * these values aligned with apps/tauri/src/globals.css. The frame owns layout;
+ * this file only supplies the platform design tokens and browser defaults.
+ */
+
+:root {
+  color-scheme: light;
+  --app-font-size: 16px;
+
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(240 3.7% 15.9%);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--foreground);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: var(--foreground);
+  --popover-accent: hsl(240 4.8% 95.9%);
+  --tooltip-chrome: hsl(240 3.7% 15.9%);
+  --tooltip-chrome-foreground: hsl(0 0% 100%);
+
+  --primary: #155dfc;
+  --primary-foreground: hsl(0 0% 100%);
+  --primary-hover: #1447e6;
+  --primary-accent: hsl(214 100% 97%);
+  --primary-accent-foreground: hsl(221 83% 53%);
+  --secondary: hsl(0 0% 100%);
+  --secondary-foreground: hsl(240 5.9% 10%);
+  --secondary-hover: hsl(240 4.8% 95.9%);
+  --muted: hsl(240 4.9% 96.1%);
+  --muted-foreground: hsl(240 3.8% 46.1%);
+  --accent: hsl(240 4.8% 95.9%);
+  --accent-foreground: hsl(240 5.9% 10%);
+
+  --destructive: hsl(0 72% 51%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --destructive-hover: hsl(0 84% 60%);
+  --destructive-accent: hsl(0 84.2% 95%);
+  --destructive-accent-foreground: var(--destructive);
+  --warning: oklch(75% 0.15 90);
+  --warning-foreground: oklch(30% 0.08 85);
+  --warning-accent: oklch(95% 0.02 90);
+  --warning-accent-foreground: var(--warning);
+  --success: oklch(69.59% 0.0596 162.48);
+  --success-foreground: oklch(37.8% 0.0292 168.94);
+  --success-accent: oklch(95% 0.02 162);
+  --success-accent-foreground: var(--success);
+  --info: oklch(70% 0.15 200);
+  --info-foreground: oklch(20% 0.05 200);
+  --info-accent: oklch(95% 0.02 200);
+  --info-accent-foreground: var(--info);
+
+  --border: hsl(240 5.9% 90%);
+  --border-focus: hsl(221 83% 53%);
+  --border-error: var(--destructive);
+  --input: hsl(240 5.9% 90%);
+  --input-background: hsl(0 0% 100%);
+  --input-border-focus: hsl(221 83% 53%);
+  --input-border-error: var(--destructive);
+  --ring: hsl(221 83% 53%);
+  --ring-focus: rgb(147 197 253 / 50%);
+
+  --text-secondary: rgb(9 9 11 / 64%);
+  --text-tertiary: rgb(9 9 11 / 48%);
+  --text-subheader: rgb(9 9 11 / 88%);
+  --text-contrast: hsl(0 0% 100%);
+  --interactive-default: transparent;
+  --interactive-hover: rgb(9 9 11 / 6%);
+  --interactive-active: rgb(9 9 11 / 10%);
+  --interactive-focus: rgb(147 197 253 / 50%);
+  --interactive-card-hover: hsl(0 0% 98%);
+
+  --surface-border-1: rgb(9 9 11 / 8%);
+  --surface-border-2: rgb(9 9 11 / 12%);
+  --workspace-divider: rgb(9 9 11 / 6%);
+  --surface-level-1: #fafafa;
+  --surface-level-1-border: transparent;
+  --surface-level-2: hsl(0 0% 100%);
+  --surface-level-minus-1: rgb(9 9 11 / 4%);
+  --surface-tag: rgb(9 9 11 / 6%);
+
+  --sidebar: hsl(240 4.8% 95.9%);
+  --sidebar-foreground: hsl(240 5.9% 10%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 5.9% 90%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(240 5.9% 90%);
+  --sidebar-ring: hsl(240 5.9% 90%);
+  --sidebar-surface: rgb(255 255 255 / 82%);
+
+  --button-tertiary-default: rgb(9 9 11 / 6%);
+  --button-tertiary-hover: hsl(240 4.9% 83.9%);
+  --button-borderless-default: transparent;
+  --button-borderless-hover: rgb(9 9 11 / 8%);
+  --button-borderless-active: hsl(214 95% 93%);
+  --icon-active: hsl(221 83% 53%);
+  --icon-secondary: hsl(240 3.8% 46.1%);
+
+  --radius: 0.5rem;
+  --z-popover: 200;
+  --z-modal: 200;
+  --z-tooltip: 250;
+  --scrollbar-thumb: rgb(9 9 11 / 22%);
+  --scrollbar-thumb-hover: rgb(9 9 11 / 34%);
+
+  --shadow-surface-sm-value:
+    0 0 0 1px rgb(9 9 11 / 8%), 0 2px 4px -1px rgb(9 9 11 / 8%),
+    0 1px 2px rgb(9 9 11 / 7%);
+  --shadow-surface-md-value:
+    0 0 0 1px rgb(9 9 11 / 8%), 0 3px 6px -1px rgb(9 9 11 / 12%),
+    0 1px 3px rgb(9 9 11 / 8%);
+  --shadow-popover-value:
+    0 0 0 1px rgb(9 9 11 / 8%), 0 4px 6px -1px rgb(9 9 11 / 12%),
+    0 2px 4px -2px rgb(9 9 11 / 12%);
+  --shadow-button-primary-value: inset 0 2px 0 rgb(255 255 255 / 16%);
+  --shadow-button-secondary-value:
+    0 0 0 1px rgb(9 9 11 / 12%), 0 2px 4px -1.5px rgb(9 9 11 / 16%);
+  --shadow-button-secondary-hover-value:
+    0 0 0 1px rgb(9 9 11 / 24%), 0 3px 6px -1px rgb(9 9 11 / 12%),
+    0 1px 3px rgb(9 9 11 / 8%);
+  --shadow-button-outline-value: inset 0 0 0 1px var(--input);
+  --shadow-button-outline-hover-value: inset 0 0 0 1px var(--border);
+  --shadow-input-rest-value: var(--shadow-surface-sm-value);
+  --shadow-input-focus-value:
+    0 0 0 3px var(--ring-focus), 0 1px 2px rgb(9 9 11 / 6%);
+}
+
+:root.dark,
+:root[data-theme='dark'] {
+  color-scheme: dark;
+
+  --background: oklch(21.03% 0.0023 285.89);
+  --foreground: oklch(98.48% 0 0);
+  --card: hsl(240 4.2% 18.8%);
+  --card-foreground: var(--foreground);
+  --popover: hsl(240 4.2% 18.8%);
+  --popover-foreground: var(--foreground);
+  --popover-accent: oklch(24.48% 0.0023 285.98);
+  --tooltip-chrome: hsl(0 0% 100%);
+  --tooltip-chrome-foreground: hsl(240 3.7% 15.9%);
+
+  --primary-foreground: hsl(0 0% 100%);
+  --primary-accent: hsl(224 64% 33%);
+  --primary-accent-foreground: var(--foreground);
+  --secondary: hsl(240 4.4% 21.4%);
+  --secondary-foreground: var(--foreground);
+  --secondary-hover: hsl(240 5.3% 26.1%);
+  --muted: oklch(24.48% 0.0023 285.98);
+  --muted-foreground: oklch(71.19% 0.0051 286.07);
+  --accent: oklch(30.27% 0.0071 285.97);
+  --accent-foreground: var(--foreground);
+
+  --destructive-accent: oklch(30% 0.03 15);
+  --warning-accent: oklch(30% 0.08 85);
+  --success: oklch(50.81% 0.042 165.61);
+  --success-foreground: var(--foreground);
+  --success-accent: oklch(30% 0.03 165);
+  --info: oklch(65% 0.12 200);
+  --info-foreground: var(--foreground);
+  --info-accent: oklch(30% 0.03 200);
+
+  --border: rgb(255 255 255 / 16%);
+  --input: oklch(30.27% 0.0071 285.97);
+  --input-background: #3f3f46;
+  --ring-focus: rgb(29 78 216 / 60%);
+
+  --text-secondary: rgb(250 250 250 / 64%);
+  --text-tertiary: rgb(250 250 250 / 48%);
+  --text-subheader: rgb(255 255 255 / 88%);
+  --interactive-hover: rgb(255 255 255 / 10%);
+  --interactive-active: rgb(255 255 255 / 20%);
+  --interactive-focus: rgb(29 78 216 / 60%);
+  --interactive-card-hover: hsl(240 3.7% 15.9%);
+
+  --surface-border-1: rgb(255 255 255 / 8%);
+  --surface-border-2: rgb(255 255 255 / 12%);
+  --workspace-divider: rgb(255 255 255 / 4.5%);
+  --surface-level-1: hsl(240 5% 8%);
+  --surface-level-1-border: rgb(255 255 255 / 16%);
+  --surface-level-2: hsl(240 4.2% 18.8%);
+  --surface-level-minus-1: #09090b;
+  --surface-tag: rgb(255 255 255 / 8%);
+
+  --sidebar: var(--surface-level-minus-1);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--foreground);
+  --sidebar-primary-foreground: hsl(240 5.9% 10%);
+  --sidebar-accent: oklch(24.48% 0.0023 285.98);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: oklch(37.05% 0.0048 285.8);
+  --sidebar-ring: oklch(37.05% 0.0048 285.8);
+  --sidebar-surface: rgb(0 0 0 / 70%);
+
+  --button-tertiary-default: rgb(255 255 255 / 8%);
+  --button-tertiary-hover: rgb(255 255 255 / 22%);
+  --button-borderless-default: transparent;
+  --button-borderless-hover: rgb(255 255 255 / 12%);
+  --button-borderless-active: hsl(224 64% 33%);
+  --scrollbar-thumb: rgb(255 255 255 / 24%);
+  --scrollbar-thumb-hover: rgb(255 255 255 / 36%);
+
+  --shadow-surface-sm-value:
+    0 2px 4px rgb(9 9 11 / 8%), 0 1px 2px rgb(9 9 11 / 7%),
+    inset 0 0 0 1px rgb(255 255 255 / 6%);
+  --shadow-surface-md-value:
+    0 4px 8px -2px rgb(9 9 11 / 16%), 0 2px 4px rgb(9 9 11 / 12%),
+    inset 0 0 0 1px rgb(255 255 255 / 8%);
+  --shadow-popover-value:
+    0 1px 4px rgb(9 9 11 / 24%), inset 0 0 0 1px rgb(255 255 255 / 6%);
+  --shadow-button-secondary-value:
+    0 0 0 1px rgb(9 9 11 / 32%), 0 2px 4px -1.5px rgb(9 9 11 / 16%),
+    inset 0 1px 0 rgb(255 255 255 / 16%);
+  --shadow-button-secondary-hover-value:
+    inset 0 0 0 1px rgb(255 255 255 / 5%), 0 3px 6px rgb(9 9 11 / 54%),
+    0 1px 3px rgb(9 9 11 / 40%);
+  --shadow-input-rest-value: inset 0 0 0 0.5px var(--border);
+  --shadow-input-focus-value:
+    0 0 0 3px var(--ring-focus), 0 1px 2px rgb(0 0 0 / 20%);
+}
+
+/* Match the platform base layer so uncolored shared borders use the token. */
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--border);
+  }
+}
+
+/* Shared Button's primary treatment relies on this platform utility. */
+.btn-primary-shine {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-primary-shine::before {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(180deg, rgb(255 255 255 / 48%), transparent);
+  content: '';
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+.btn-primary-shine:hover::before {
+  background: linear-gradient(180deg, rgb(255 255 255 / 32%), transparent);
+}
+
+.btn-primary-shine:active::before {
+  display: none;
+}
+
+.code-block-light {
+  display: block;
+}
+
+.code-block-dark {
+  display: none;
+}
+
+.dark .code-block-light {
+  display: none;
+}
+
+.dark .code-block-dark {
+  display: block;
+}
+
+/* Browser-safe document defaults for isolated miniapp surfaces. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+html {
+  font-size: var(--app-font-size);
+}
+
+body {
+  margin: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
+}
+
+button:not(:disabled),
+[role='button']:not([aria-disabled='true']) {
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--primary) 25%, transparent);
+}
+
+* {
+  scrollbar-color: var(--scrollbar-thumb) transparent;
+  scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  border-radius: 9999px;
+  background: var(--scrollbar-thumb);
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+  background-clip: padding-box;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}