sea-dev 1.0.0

package/libs/ui/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 900;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/libs/ui/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/libs/ui/src/styles/fonts.css

@@ -0,0 +1,35 @@
+/* manrope-300 - latin */
+@font-face {
+  font-display: swap;
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 300;
+  src: url("../fonts/manrope-v15-latin-300.woff2") format("woff2");
+}
+
+/* manrope-400 - latin */
+@font-face {
+  font-display: swap;
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/manrope-v15-latin-400.woff2") format("woff2");
+}
+
+/* manrope-500 - latin */
+@font-face {
+  font-display: swap;
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 500;
+  src: url("../fonts/manrope-v15-latin-500.woff2") format("woff2");
+}
+
+/* manrope-600 - latin */
+@font-face {
+  font-display: swap;
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 600;
+  src: url("../fonts/manrope-v15-latin-600.woff2") format("woff2");
+}

package/libs/ui/src/styles/style.css

@@ -0,0 +1,218 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@plugin "@tailwindcss/typography";
+
+@source "../**/*.{js,ts,jsx,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --sidebar: oklch(0.99 0.01 275);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme {
+  --color-brand-50: oklch(0.962 0.016 274.8);
+  --color-brand-100: oklch(0.931 0.03 275.6);
+  --color-brand-200: oklch(0.871 0.056 277.4);
+  --color-brand-300: oklch(0.789 0.093 277.3);
+  --color-brand-400: oklch(0.685 0.143 279.7);
+  --color-brand-500: oklch(0.597 0.182 280.1);
+  --color-brand-600: oklch(0.528 0.201 280.9);
+  --color-brand-700: oklch(0.472 0.189 281.4);
+  --color-brand-800: oklch(0.413 0.155 281.8);
+  --color-brand-900: oklch(0.374 0.108 279.8);
+  --color-brand-950: oklch(0.259 0.073 284.7);
+
+  --color-secondary-50: oklch(0.978 0.011 308.3);
+  --color-secondary-100: oklch(0.95 0.027 307.1);
+  --color-secondary-200: oklch(0.896 0.055 306.7);
+  --color-secondary-300: oklch(0.838 0.085 306.6);
+  --color-secondary-400: oklch(0.737 0.141 306);
+  --color-secondary-500: oklch(0.665 0.189 308.1);
+  --color-secondary-600: oklch(0.592 0.218 306.3);
+  --color-secondary-700: oklch(0.529 0.233 303.1);
+  --color-secondary-800: oklch(0.471 0.225 300.4);
+  --color-secondary-900: oklch(0.402 0.207 297.6);
+  --color-secondary-950: oklch(0.344 0.175 297.5);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --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-primary: var(--color-brand-950);
+  --color-primary-foreground: var(--color-neutral-50);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-brand: var(--color-brand-100);
+  --color-brand-foreground: var(--color-brand-600);
+
+  --color-brand-sec: var(--color-secondary-100);
+  --color-brand-sec-foreground: var(--color-secondary-600);
+
+  --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-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--color-secondary-500);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --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);
+}
+
+@layer base {
+  /* Remove number input spinners */
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"] {
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+    -moz-appearance: textfield !important;
+  }
+
+  /* Base styles */
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /* Add cursor to button */
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+  }
+
+  /* Fonts */
+  :root {
+    --font-sans: "Manrope", sans-serif;
+    --font-kode: "Kode", monospace;
+  }
+
+  html {
+    font-family: var(--font-sans);
+  }
+}
+
+@layer utilities {
+  .font-head {
+    font-family: var(--font-sans);
+  }
+}

package/libs/ui/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "declaration": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ES2022",
+    "skipLibCheck": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUncheckedIndexedAccess": true,
+    "baseUrl": ".",
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "**/*.test.ts", "**/*.spec.ts"]
+}

package/libs/ui/vite.config.ts

@@ -0,0 +1,80 @@
+import { glob } from "glob";
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: {
+        // Individual component entries
+        ...glob.sync("src/components/ui/*.tsx").reduce(
+          (entries, file) => {
+            const name = file.replace("src/", "").replace(".tsx", "");
+            entries[name] = resolve(__dirname, file);
+            return entries;
+          },
+          {} as Record<string, string>,
+        ),
+        ...glob.sync("src/components/table/*.tsx").reduce(
+          (entries, file) => {
+            const name = file.replace("src/", "").replace(".tsx", "");
+            entries[name] = resolve(__dirname, file);
+            return entries;
+          },
+          {} as Record<string, string>,
+        ),
+        ...glob.sync("src/components/doc-viewers/**/*.{ts,tsx}").reduce(
+          (entries, file) => {
+            const name = file
+              .replace("src/", "")
+              .replace(".tsx", "")
+              .replace(".ts", "")
+              .replace("/index", "");
+            entries[name] = resolve(__dirname, file);
+            return entries;
+          },
+          {} as Record<string, string>,
+        ),
+        ...glob.sync("src/components/misc/*.tsx").reduce(
+          (entries, file) => {
+            const name = file.replace("src/", "").replace(".tsx", "");
+            entries[name] = resolve(__dirname, file);
+            return entries;
+          },
+          {} as Record<string, string>,
+        ),
+        ...glob.sync("src/components/chart-viz/**/*.{ts,tsx}").reduce(
+          (entries, file) => {
+            const name = file.replace("src/", "").replace(".tsx", "").replace(".ts", "");
+            entries[name] = resolve(__dirname, file);
+            return entries;
+          },
+          {} as Record<string, string>,
+        ),
+        ...glob.sync("src/lib/*.ts").reduce(
+          (entries, file) => {
+            const name = file.replace("src/", "").replace(".ts", "");
+            entries[name] = resolve(__dirname, file);
+            return entries;
+          },
+          {} as Record<string, string>,
+        ),
+      },
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: (id) => {
+        // Externalize all dependencies (anything from node_modules)
+        return !id.startsWith(".") && !id.startsWith("/") && !id.startsWith("@/");
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
+  plugins: [dts()],
+});

package/libs/ui-lit/README.md

@@ -0,0 +1,245 @@
+# @sea/ui-lit
+
+Internal Lit component library for Sea platform widgets. Provides a consistent design system and reusable UI components built with Lit web components.
+
+## Components
+
+### SeaButton
+Full-featured button component with multiple variants and sizes.
+
+```typescript
+import '@sea/ui-lit';
+
+<sea-button variant="primary" size="md">Click me</sea-button>
+<sea-button variant="outline" size="sm">Small outline</sea-button>
+<sea-button variant="destructive" disabled>Disabled</sea-button>
+```
+
+**Props:**
+- `variant`: "primary" | "secondary" | "outline" | "ghost" | "destructive" (default: "primary")
+- `size`: "sm" | "md" | "lg" (default: "md")
+- `disabled`: boolean (default: false)
+- `type`: "button" | "submit" | "reset" (default: "button")
+- `full-width`: boolean attribute for 100% width
+
+### SeaInput
+Text input and textarea component with label, error, and helper text support.
+
+```typescript
+<sea-input
+  label="Email"
+  type="email"
+  placeholder="you@example.com"
+  required
+></sea-input>
+
+<sea-input
+  label="Message"
+  type="textarea"
+  helper="Enter your message here"
+></sea-input>
+
+<sea-input
+  label="Username"
+  error="Username is required"
+></sea-input>
+```
+
+**Props:**
+- `label`: string - Input label
+- `placeholder`: string - Placeholder text
+- `value`: string - Input value
+- `type`: "text" | "password" | "email" | "number" | "textarea" (default: "text")
+- `disabled`: boolean
+- `required`: boolean
+- `error`: string - Error message (shows red border and error text)
+- `helper`: string - Helper text
+- `name`: string - Form field name
+
+**Methods:**
+- `focus()` - Programmatically focus the input
+- `blur()` - Programmatically blur the input
+
+**Events:**
+- `input` - Fired on input with `detail: { value: string }`
+- `change` - Fired on change with `detail: { value: string }`
+
+### SeaCard
+Container component with header, content, and footer sections.
+
+```typescript
+<sea-card title="Card Title" description="Card description">
+  <p>Card content goes here</p>
+  <div slot="footer">
+    <sea-button>Action</sea-button>
+  </div>
+</sea-card>
+
+<sea-card hoverable compact>
+  <p>Compact hoverable card</p>
+</sea-card>
+```
+
+**Props:**
+- `title`: string - Card title
+- `description`: string - Card description
+- `hoverable`: boolean - Adds hover effect (useful for clickable cards)
+- `compact`: boolean - Reduces padding
+
+**Slots:**
+- Default slot - Card content
+- `header` - Additional header content
+- `footer` - Footer content
+
+### SeaSpinner
+Loading spinner component.
+
+```typescript
+<sea-spinner></sea-spinner>
+<sea-spinner size="sm"></sea-spinner>
+<sea-spinner size="lg"></sea-spinner>
+```
+
+**Props:**
+- `size`: "sm" | "md" | "lg" (default: "md")
+
+### SeaAlert
+Alert/notification component with variants.
+
+```typescript
+<sea-alert variant="success" title="Success!">
+  Your changes have been saved.
+</sea-alert>
+
+<sea-alert variant="error" dismissible>
+  An error occurred. Please try again.
+</sea-alert>
+
+<sea-alert variant="warning" title="Warning">
+  This action cannot be undone.
+</sea-alert>
+
+<sea-alert variant="info">
+  New features are available!
+</sea-alert>
+```
+
+**Props:**
+- `variant`: "info" | "success" | "warning" | "error" (default: "info")
+- `title`: string - Alert title
+- `dismissible`: boolean - Shows close button
+
+**Events:**
+- `close` - Fired when alert is dismissed (also removes element from DOM)
+
+## Theming
+
+All components use CSS custom properties for theming. Import the theme file and override variables as needed:
+
+```css
+@import '@sea/ui-lit/theme.css';
+
+:root {
+  --sea-primary: #your-color;
+  --sea-border-radius: 0.5rem;
+  /* ... other variables ... */
+}
+```
+
+### Available Theme Variables
+
+```css
+/* Colors */
+--sea-primary
+--sea-primary-hover
+--sea-primary-active
+--sea-secondary
+--sea-destructive
+--sea-border
+--sea-background
+--sea-text-primary
+--sea-text-secondary
+
+/* Spacing */
+--sea-spacing-xs
+--sea-spacing-sm
+--sea-spacing-md
+--sea-spacing-lg
+--sea-spacing-xl
+
+/* Border radius */
+--sea-radius-sm
+--sea-radius-md
+--sea-radius-lg
+
+/* Typography */
+--sea-font-family
+--sea-font-size-sm
+--sea-font-size-base
+--sea-font-size-lg
+
+/* Transitions */
+--sea-transition-fast
+--sea-transition-base
+```
+
+## Usage in TypeScript
+
+```typescript
+import { SeaButton, SeaInput, SeaCard } from '@sea/ui-lit';
+
+// Components auto-register themselves
+// Just use them in your Lit templates
+
+render() {
+  return html`
+    <sea-card title="Login">
+      <sea-input
+        label="Email"
+        .value=${this.email}
+        @input=${(e) => this.email = e.detail.value}
+      ></sea-input>
+
+      <sea-button @click=${this.handleSubmit}>
+        Submit
+      </sea-button>
+    </sea-card>
+  `;
+}
+```
+
+## Bundle Size
+
+- Full library: ~6.82 KB gzipped
+- Tree-shakeable: Only import what you use
+- No external dependencies except Lit
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Type check
+pnpm run typecheck
+
+# Build
+pnpm run build
+
+# Development mode with watch
+pnpm run dev
+```
+
+## Browser Support
+
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari 15+
+
+## Design Principles
+
+- **Consistent**: All components follow the same design language
+- **Accessible**: Semantic HTML and ARIA labels where appropriate
+- **Themeable**: CSS custom properties for easy customization
+- **Lightweight**: Small bundle size with tree-shaking
+- **Type-safe**: Full TypeScript support