@neurosquad/card-sdk 1.0.0

package/dist/ui.css

@@ -0,0 +1,581 @@
+/*
+ * @neurosquad/card-sdk/ui.css — an optional, small dark kit that matches the
+ * NeuroSquad app. Everything reads the --ns-* variables that connect() /
+ * applyTheme() set from the app's live theme; the fallbacks below are the
+ * app's dark theme, so a page previewed outside the app looks right too.
+ *
+ * Opt in per element with ns-* classes, or add class="ns-kit" on <body> for
+ * base typography, background and scrollbars. Ignore the whole file if you
+ * style your card yourself.
+ */
+
+:root {
+  --ns-kit-bg: var(--ns-background, oklch(12% 0.005 285.823));
+  --ns-kit-fg: var(--ns-foreground, oklch(0.9911 0 0));
+  --ns-kit-muted: var(--ns-muted, oklch(70.5% 0.015 286.067));
+  --ns-kit-surface: var(--ns-surface, oklch(0.2103 0.0059 285.89));
+  --ns-kit-surface-2: var(--ns-surface-secondary, oklch(0.257 0.0037 286.14));
+  --ns-kit-surface-3: var(--ns-surface-tertiary, oklch(0.2721 0.0024 247.91));
+  --ns-kit-default: var(--ns-default, oklch(27.4% 0.006 286.033));
+  --ns-kit-default-fg: var(--ns-default-foreground, oklch(0.9911 0 0));
+  --ns-kit-accent: var(--ns-accent, oklch(0.6204 0.195 253.83));
+  --ns-kit-accent-fg: var(--ns-accent-foreground, oklch(0.9911 0 0));
+  --ns-kit-accent-soft: var(
+    --ns-accent-soft,
+    color-mix(in oklab, var(--ns-kit-accent) 15%, transparent)
+  );
+  --ns-kit-accent-soft-fg: var(--ns-accent-soft-foreground, oklch(0.73 0.14 254));
+  --ns-kit-success: var(--ns-success, oklch(0.7329 0.1935 150.81));
+  --ns-kit-success-soft: var(
+    --ns-success-soft,
+    color-mix(in oklab, var(--ns-kit-success) 15%, transparent)
+  );
+  --ns-kit-warning: var(--ns-warning, oklch(0.8203 0.1388 76.34));
+  --ns-kit-warning-soft: var(
+    --ns-warning-soft,
+    color-mix(in oklab, var(--ns-kit-warning) 15%, transparent)
+  );
+  --ns-kit-danger: var(--ns-danger, oklch(0.594 0.1967 24.63));
+  --ns-kit-danger-fg: var(--ns-danger-foreground, oklch(0.9911 0 0));
+  --ns-kit-danger-soft: var(
+    --ns-danger-soft,
+    color-mix(in oklab, var(--ns-kit-danger) 15%, transparent)
+  );
+  --ns-kit-border: var(--ns-border, oklch(28% 0.006 286.033));
+  --ns-kit-border-2: var(--ns-border-secondary, oklch(38% 0.005 286));
+  --ns-kit-separator: var(--ns-separator, oklch(25% 0.006 286.033));
+  --ns-kit-focus: var(--ns-focus, var(--ns-kit-accent));
+  --ns-kit-field-bg: var(--ns-field-background, oklch(0.2103 0.0059 285.89));
+  --ns-kit-field-fg: var(--ns-field-foreground, oklch(0.9911 0 0));
+  --ns-kit-field-placeholder: var(--ns-field-placeholder, var(--ns-kit-muted));
+  --ns-kit-field-border: var(--ns-field-border, transparent);
+  --ns-kit-radius: var(--ns-radius, 0.5rem);
+  --ns-kit-field-radius: var(--ns-field-radius, 0.75rem);
+  --ns-kit-font: var(
+    --ns-font-sans,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif
+  );
+  --ns-kit-mono: var(
+    --ns-font-mono,
+    ui-monospace,
+    SFMono-Regular,
+    'Cascadia Mono',
+    Menlo,
+    Consolas,
+    monospace
+  );
+  --ns-kit-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+/* --- base --------------------------------------------------------------- */
+
+.ns-kit {
+  margin: 0;
+  min-height: 100vh;
+  box-sizing: border-box;
+  background: var(--ns-kit-bg);
+  color: var(--ns-kit-fg);
+  font-family: var(--ns-kit-font);
+  font-size: 14px;
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+  color-scheme: dark;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklch, var(--ns-kit-fg) 15%, transparent) transparent;
+}
+.ns-kit *,
+.ns-kit *::before,
+.ns-kit *::after {
+  box-sizing: inherit;
+}
+.ns-kit :focus-visible {
+  outline: 2px solid var(--ns-kit-focus);
+  outline-offset: 2px;
+}
+
+/* --- layout ------------------------------------------------------------- */
+
+.ns-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ns-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ns-spread {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.ns-grow {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.ns-pad {
+  padding: 12px;
+}
+.ns-scroll {
+  overflow: auto;
+  min-height: 0;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklch, var(--ns-kit-fg) 15%, transparent) transparent;
+  overscroll-behavior: contain;
+}
+.ns-divider {
+  height: 1px;
+  border: 0;
+  margin: 4px 0;
+  background: var(--ns-kit-separator);
+}
+
+/* --- surfaces ----------------------------------------------------------- */
+
+.ns-surface {
+  background: var(--ns-kit-surface);
+  border: 1px solid var(--ns-kit-border);
+  border-radius: calc(var(--ns-kit-radius) * 1.5);
+  padding: 12px;
+}
+.ns-surface--inset {
+  background: var(--ns-kit-surface-2);
+  border-color: transparent;
+}
+
+/* --- text --------------------------------------------------------------- */
+
+.ns-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.ns-subtitle {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ns-kit-muted);
+}
+.ns-muted {
+  color: var(--ns-kit-muted);
+}
+.ns-small {
+  font-size: 12px;
+}
+.ns-mono {
+  font-family: var(--ns-kit-mono);
+  font-size: 12.5px;
+}
+.ns-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ns-kbd {
+  display: inline-block;
+  padding: 1px 6px;
+  border: 1px solid var(--ns-kit-border-2);
+  border-bottom-width: 2px;
+  border-radius: 6px;
+  font-family: var(--ns-kit-mono);
+  font-size: 11px;
+  color: var(--ns-kit-muted);
+}
+
+/* --- buttons ------------------------------------------------------------ */
+
+.ns-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: var(--ns-kit-radius);
+  background: var(--ns-kit-default);
+  color: var(--ns-kit-default-fg);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color 150ms var(--ns-kit-ease),
+    border-color 150ms var(--ns-kit-ease),
+    transform 100ms var(--ns-kit-ease),
+    opacity 150ms var(--ns-kit-ease);
+}
+.ns-btn:hover {
+  background: color-mix(in oklab, var(--ns-kit-default) 88%, var(--ns-kit-default-fg) 12%);
+}
+.ns-btn:active {
+  transform: scale(0.97);
+}
+.ns-btn:focus-visible {
+  outline: 2px solid var(--ns-kit-focus);
+  outline-offset: 2px;
+}
+.ns-btn:disabled,
+.ns-btn[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+.ns-btn--primary {
+  background: var(--ns-kit-accent);
+  color: var(--ns-kit-accent-fg);
+}
+.ns-btn--primary:hover {
+  background: color-mix(in oklab, var(--ns-kit-accent) 90%, var(--ns-kit-accent-fg) 10%);
+}
+.ns-btn--secondary {
+  background: var(--ns-kit-accent-soft);
+  color: var(--ns-kit-accent-soft-fg);
+}
+.ns-btn--secondary:hover {
+  background: color-mix(in oklab, var(--ns-kit-accent) 22%, transparent);
+}
+.ns-btn--outline {
+  background: transparent;
+  border-color: var(--ns-kit-border-2);
+}
+.ns-btn--outline:hover {
+  background: color-mix(in oklab, var(--ns-kit-default) 60%, transparent);
+}
+.ns-btn--ghost {
+  background: transparent;
+}
+.ns-btn--ghost:hover {
+  background: color-mix(in oklab, var(--ns-kit-default) 70%, transparent);
+}
+.ns-btn--danger {
+  background: var(--ns-kit-danger);
+  color: var(--ns-kit-danger-fg);
+}
+.ns-btn--danger:hover {
+  background: color-mix(in oklab, var(--ns-kit-danger) 90%, var(--ns-kit-danger-fg) 10%);
+}
+.ns-btn--sm {
+  height: 26px;
+  padding: 0 9px;
+  font-size: 12px;
+}
+.ns-btn--lg {
+  height: 40px;
+  padding: 0 16px;
+  font-size: 14px;
+}
+.ns-btn--icon {
+  width: 32px;
+  padding: 0;
+}
+.ns-btn--icon.ns-btn--sm {
+  width: 26px;
+}
+
+/* --- fields ------------------------------------------------------------- */
+
+.ns-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ns-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ns-kit-muted);
+}
+.ns-input,
+.ns-textarea,
+.ns-select {
+  width: 100%;
+  min-height: 34px;
+  padding: 7px 10px;
+  border: 1px solid var(--ns-kit-field-border);
+  border-radius: var(--ns-kit-field-radius);
+  background: var(--ns-kit-field-bg);
+  color: var(--ns-kit-field-fg);
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+  transition:
+    background-color 150ms var(--ns-kit-ease),
+    box-shadow 150ms var(--ns-kit-ease);
+}
+.ns-input::placeholder,
+.ns-textarea::placeholder {
+  color: var(--ns-kit-field-placeholder);
+}
+.ns-input:hover,
+.ns-textarea:hover,
+.ns-select:hover {
+  background: color-mix(in oklab, var(--ns-kit-field-bg) 92%, var(--ns-kit-field-fg) 4%);
+}
+.ns-input:focus-visible,
+.ns-textarea:focus-visible,
+.ns-select:focus-visible {
+  box-shadow: 0 0 0 2px var(--ns-kit-focus);
+}
+.ns-input[aria-invalid='true'],
+.ns-textarea[aria-invalid='true'] {
+  box-shadow: 0 0 0 1px var(--ns-kit-danger);
+}
+.ns-textarea {
+  min-height: 72px;
+  resize: vertical;
+}
+.ns-select {
+  appearance: none;
+  padding-right: 28px;
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--ns-kit-muted) 50%),
+    linear-gradient(135deg, var(--ns-kit-muted) 50%, transparent 50%);
+  background-position:
+    calc(100% - 15px) 50%,
+    calc(100% - 10px) 50%;
+  background-size: 5px 5px;
+  background-repeat: no-repeat;
+}
+.ns-help {
+  font-size: 12px;
+  color: var(--ns-kit-muted);
+}
+.ns-error {
+  font-size: 12px;
+  color: var(--ns-kit-danger);
+}
+
+/* Switch: <label class="ns-switch"><input type="checkbox"> Label</label> */
+.ns-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.ns-switch input {
+  appearance: none;
+  position: relative;
+  flex: none;
+  width: 32px;
+  height: 18px;
+  margin: 0;
+  border-radius: 999px;
+  background: var(--ns-kit-default);
+  cursor: pointer;
+  transition: background-color 150ms var(--ns-kit-ease);
+}
+.ns-switch input::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--ns-kit-fg);
+  transition: transform 150ms var(--ns-kit-ease);
+}
+.ns-switch input:checked {
+  background: var(--ns-kit-accent);
+}
+.ns-switch input:checked::after {
+  transform: translateX(14px);
+}
+.ns-switch input:focus-visible {
+  outline: 2px solid var(--ns-kit-focus);
+  outline-offset: 2px;
+}
+
+/* --- lists -------------------------------------------------------------- */
+
+.ns-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ns-list-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 6px 10px;
+  border-radius: var(--ns-kit-radius);
+  transition: background-color 120ms var(--ns-kit-ease);
+}
+.ns-list-item:hover,
+.ns-list-item[aria-selected='true'] {
+  background: var(--ns-kit-surface-2);
+}
+button.ns-list-item {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* --- badges, dots, chips -------------------------------------------------- */
+
+.ns-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 999px;
+  background: var(--ns-kit-default);
+  color: var(--ns-kit-default-fg);
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.ns-badge--accent {
+  background: var(--ns-kit-accent-soft);
+  color: var(--ns-kit-accent-soft-fg);
+}
+.ns-badge--success {
+  background: var(--ns-kit-success-soft);
+  color: var(--ns-kit-success);
+}
+.ns-badge--warning {
+  background: var(--ns-kit-warning-soft);
+  color: var(--ns-kit-warning);
+}
+.ns-badge--danger {
+  background: var(--ns-kit-danger-soft);
+  color: color-mix(in oklab, var(--ns-kit-danger) 70%, var(--ns-kit-fg) 30%);
+}
+
+.ns-dot {
+  display: inline-block;
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--ns-kit-muted);
+}
+.ns-dot--accent {
+  background: var(--ns-kit-accent);
+  box-shadow: 0 0 8px color-mix(in oklab, var(--ns-kit-accent) 70%, transparent);
+}
+.ns-dot--success {
+  background: var(--ns-kit-success);
+  box-shadow: 0 0 8px color-mix(in oklab, var(--ns-kit-success) 70%, transparent);
+}
+.ns-dot--warning {
+  background: var(--ns-kit-warning);
+  box-shadow: 0 0 8px color-mix(in oklab, var(--ns-kit-warning) 70%, transparent);
+}
+.ns-dot--danger {
+  background: var(--ns-kit-danger);
+  box-shadow: 0 0 8px color-mix(in oklab, var(--ns-kit-danger) 70%, transparent);
+}
+
+/* --- feedback ------------------------------------------------------------ */
+
+.ns-spinner {
+  display: inline-block;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid color-mix(in oklab, var(--ns-kit-fg) 18%, transparent);
+  border-top-color: var(--ns-kit-accent);
+  border-radius: 50%;
+  animation: ns-spin 700ms linear infinite;
+}
+@keyframes ns-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ns-progress {
+  position: relative;
+  height: 6px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--ns-kit-default);
+}
+.ns-progress > span {
+  display: block;
+  height: 100%;
+  width: var(--ns-progress, 0%);
+  border-radius: inherit;
+  background: var(--ns-kit-accent);
+  transition: width 250ms var(--ns-kit-ease);
+}
+
+.ns-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 120px;
+  padding: 16px;
+  text-align: center;
+  color: var(--ns-kit-muted);
+}
+.ns-empty strong {
+  color: var(--ns-kit-fg);
+  font-weight: 600;
+}
+
+.ns-callout {
+  padding: 8px 10px;
+  border-radius: var(--ns-kit-radius);
+  background: var(--ns-kit-accent-soft);
+  color: var(--ns-kit-accent-soft-fg);
+  font-size: 12.5px;
+}
+.ns-callout--danger {
+  background: var(--ns-kit-danger-soft);
+  color: color-mix(in oklab, var(--ns-kit-danger) 70%, var(--ns-kit-fg) 30%);
+}
+.ns-callout--success {
+  background: var(--ns-kit-success-soft);
+  color: var(--ns-kit-success);
+}
+
+/* A card is paused while nobody sees it: `document.documentElement.dataset.nsPaused` (set it yourself). */
+[data-ns-paused] .ns-spinner {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ns-btn,
+  .ns-input,
+  .ns-textarea,
+  .ns-select,
+  .ns-switch input,
+  .ns-switch input::after,
+  .ns-list-item,
+  .ns-progress > span {
+    transition: none;
+  }
+  .ns-spinner {
+    animation-duration: 2s;
+  }
+}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@neurosquad/card-sdk",
+  "version": "1.0.0",
+  "description": "Build custom cards for NeuroSquad: a typed client for the card API, React hooks, an optional dark UI kit and the neurosquad-card CLI (create, dev, validate, pack).",
+  "license": "MIT",
+  "author": "NeuroSquad",
+  "homepage": "https://neurosquad.ai",
+  "keywords": [
+    "neurosquad",
+    "card",
+    "sdk",
+    "agents",
+    "canvas",
+    "plugin"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "./dist/card-sdk.js",
+    "./dist/ui.css"
+  ],
+  "main": "./dist/card-sdk.js",
+  "module": "./dist/card-sdk.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/card-sdk.js"
+    },
+    "./react": {
+      "types": "./dist/types/react/index.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./testing": {
+      "types": "./dist/types/testing/index.d.ts",
+      "default": "./dist/testing.js"
+    },
+    "./ui.css": "./dist/ui.css",
+    "./schema.json": "./schema/neurosquad-card.v1.json",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "neurosquad-card": "./dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "schema",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18.17"
+  },
+  "scripts": {
+    "sync-contract": "node scripts/sync-contract.mjs",
+    "check-contract": "node scripts/sync-contract.mjs --check",
+    "build": "node scripts/build.mjs",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "node scripts/build.mjs && tsc --noEmit -p tsconfig.json && vitest run"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^22.19.1",
+    "@types/react": "^19.2.7",
+    "esbuild": "^0.25.12",
+    "react": "19.2.8",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.7"
+  }
+}