@bibobonking/opensol 0.0.0-stage → 3.0.2

package/src/components/PixleSol.tsx

@@ -0,0 +1,243 @@
+import type { ReactNode } from 'react'
+import { PIXLE_LABELS, type PixleMood } from '../lib/pixlesol'
+import { cn } from '../lib/utils'
+
+/**
+ * PixleSol is OpenSol's pixel sun. Everything is drawn on one 16×16 crisp-edges
+ * grid so the sprite stays sharp at any size. Rays are split into two sets
+ * (plus / diagonal) that swap in "busy" moods to give a pixel-art twinkle
+ * without ever rotating (rotation would blur the pixels).
+ */
+const PALETTE = {
+  outline: '#6b3410',
+  body: '#fbbf24',
+  shade: '#f59e0b',
+  highlight: '#fef3c7',
+  ray: '#f59e0b',
+  eye: '#1a0f06',
+  mark: '#4a2508',
+  blush: '#fb7185',
+  sweat: '#38bdf8',
+  mint: '#34d399',
+  sky: '#60a5fa',
+  rose: '#fb7185',
+} as const
+
+type Px = readonly [x: number, y: number, w: number, h: number, color: keyof typeof PALETTE]
+
+const MOOD_ANIMATION: Record<PixleMood, string> = {
+  wave: 'animate-bob',
+  idle: 'animate-float-slow',
+  thinking: 'animate-float',
+  working: 'animate-bob-fast',
+  typing: 'animate-bob',
+  happy: 'animate-pop',
+  alert: 'animate-bounce',
+  error: 'animate-shake',
+  sleepy: 'animate-float-slow',
+  party: 'animate-pop',
+}
+
+const TWINKLE = new Set<PixleMood>(['thinking', 'working', 'typing', 'party', 'wave'])
+
+// Body mask: a rounded 8×8 disc centred on (8, 8).
+const BODY_ROWS: Array<[y: number, x0: number, x1: number]> = [
+  [4, 6, 9],
+  [5, 5, 10],
+  [6, 4, 11],
+  [7, 4, 11],
+  [8, 4, 11],
+  [9, 4, 11],
+  [10, 5, 10],
+  [11, 6, 9],
+]
+
+const BODY = new Set<string>()
+for (const [y, x0, x1] of BODY_ROWS) for (let x = x0; x <= x1; x++) BODY.add(`${x},${y}`)
+
+const OUTLINE: Array<[number, number]> = []
+for (let y = 2; y <= 13; y++) {
+  for (let x = 2; x <= 13; x++) {
+    if (BODY.has(`${x},${y}`)) continue
+    const touches =
+      BODY.has(`${x - 1},${y}`) || BODY.has(`${x + 1},${y}`) || BODY.has(`${x},${y - 1}`) || BODY.has(`${x},${y + 1}`)
+    if (touches) OUTLINE.push([x, y])
+  }
+}
+
+const RAYS_PLUS: Px[] = [
+  [7, 0, 2, 2, 'ray'],
+  [7, 14, 2, 2, 'ray'],
+  [0, 7, 2, 2, 'ray'],
+  [14, 7, 2, 2, 'ray'],
+]
+const RAYS_DIAG: Px[] = [
+  [2, 2, 1, 1, 'ray'],
+  [13, 2, 1, 1, 'ray'],
+  [2, 13, 1, 1, 'ray'],
+  [13, 13, 1, 1, 'ray'],
+  [3, 3, 1, 1, 'ray'],
+  [12, 3, 1, 1, 'ray'],
+  [3, 12, 1, 1, 'ray'],
+  [12, 12, 1, 1, 'ray'],
+]
+
+/**
+ * PixleSol has no mouth. Its eyes are always plain black dots; mood is carried by
+ * where the dots look, how big they are, small marks beside the sun (?, !, z,
+ * a sweat drop, confetti) and how the rays behave.
+ */
+type EyeSize = 'sm' | 'md' | 'lg' | 'flat'
+
+function eyes(size: EyeSize, dx = 0, dy = 0): Px[] {
+  const [w, h] = size === 'sm' ? [1, 1] : size === 'md' ? [1, 2] : size === 'lg' ? [2, 2] : [2, 1]
+  const y = (size === 'sm' ? 8 : size === 'flat' ? 8 : 7) + dy
+  const left = size === 'lg' || size === 'flat' ? 5 : 6
+  const right = size === 'lg' || size === 'flat' ? 9 : 9
+  return [
+    [left + dx, y, w, h, 'eye'],
+    [right + dx, y, w, h, 'eye'],
+  ]
+}
+
+const BLUSH: Px[] = [
+  [4, 9, 1, 1, 'blush'],
+  [11, 9, 1, 1, 'blush'],
+]
+
+interface Look {
+  eyes: Px[]
+  extras: Px[]
+  /** Hide the diagonal rays so marks beside the sun stay readable. */
+  clearCorner?: boolean
+  /** Extra class on the eye group (blink / scan animation). */
+  eyeClass?: string
+}
+
+function look(mood: PixleMood): Look {
+  switch (mood) {
+    case 'wave':
+      return { eyes: eyes('md'), extras: BLUSH, eyeClass: 'pxs-blink' }
+    case 'happy':
+      return {
+        eyes: eyes('lg'),
+        extras: [...BLUSH, [13, 1, 1, 3, 'ray'], [12, 2, 3, 1, 'ray']],
+        clearCorner: true,
+      }
+    case 'party':
+      return {
+        eyes: eyes('lg'),
+        extras: [
+          [1, 3, 1, 1, 'rose'],
+          [14, 2, 1, 1, 'mint'],
+          [0, 11, 1, 1, 'sky'],
+          [15, 12, 1, 1, 'rose'],
+          [4, 0, 1, 1, 'mint'],
+          [11, 0, 1, 1, 'sky'],
+          [2, 14, 1, 1, 'mint'],
+          [13, 14, 1, 1, 'rose'],
+        ],
+        clearCorner: true,
+      }
+    case 'thinking':
+      return {
+        eyes: eyes('md', 1, -1),
+        extras: [
+          [10, 1, 1, 1, 'mark'],
+          [12, 1, 1, 1, 'mark'],
+          [14, 1, 1, 1, 'mark'],
+        ],
+        clearCorner: true,
+      }
+    case 'working':
+      return { eyes: eyes('sm', 0, 1), extras: [], eyeClass: 'pxs-scan' }
+    case 'typing':
+      return { eyes: eyes('md', 0, 1), extras: [], eyeClass: 'pxs-scan' }
+    case 'alert':
+      return {
+        eyes: eyes('lg'),
+        extras: [
+          [13, 0, 1, 3, 'mark'],
+          [13, 4, 1, 1, 'mark'],
+        ],
+        clearCorner: true,
+      }
+    case 'error':
+      return {
+        eyes: eyes('sm', 0, 1),
+        extras: [
+          [12, 3, 1, 1, 'sweat'],
+          [12, 4, 1, 2, 'sweat'],
+        ],
+        clearCorner: true,
+      }
+    case 'sleepy':
+      return {
+        eyes: eyes('flat'),
+        extras: [
+          [12, 1, 4, 1, 'mark'],
+          [14, 2, 1, 1, 'mark'],
+          [13, 3, 1, 1, 'mark'],
+          [12, 4, 4, 1, 'mark'],
+        ],
+        clearCorner: true,
+      }
+    default:
+      return { eyes: eyes('md'), extras: [], eyeClass: 'pxs-blink' }
+  }
+}
+
+export function PixleSol({
+  mood = 'idle',
+  size = 40,
+  className,
+  animate = true,
+}: {
+  mood?: PixleMood
+  size?: number
+  className?: string
+  animate?: boolean
+}): ReactNode {
+  const label = PIXLE_LABELS[mood]
+  const twinkle = animate && TWINKLE.has(mood)
+  const face = look(mood)
+  return (
+    <span
+      className={cn('inline-flex shrink-0 select-none', animate && MOOD_ANIMATION[mood], className)}
+      role="img"
+      aria-label={`PixleSol — ${label}`}
+      title={`PixleSol — ${label}`}
+    >
+      <svg viewBox="0 0 16 16" width={size} height={size} shapeRendering="crispEdges" aria-hidden="true">
+        <g className={twinkle ? 'pxs-a' : undefined}>
+          {RAYS_PLUS.map(([x, y, w, h, c], i) => (
+            <rect key={i} x={x} y={y} width={w} height={h} fill={PALETTE[c]} />
+          ))}
+        </g>
+        <g className={twinkle ? 'pxs-b' : undefined} opacity={face.clearCorner ? 0.35 : undefined}>
+          {RAYS_DIAG.map(([x, y, w, h, c], i) => (
+            <rect key={i} x={x} y={y} width={w} height={h} fill={PALETTE[c]} />
+          ))}
+        </g>
+        {OUTLINE.map(([x, y]) => (
+          <rect key={`o${x},${y}`} x={x} y={y} width={1} height={1} fill={PALETTE.outline} />
+        ))}
+        {BODY_ROWS.map(([y, x0, x1]) => (
+          <rect key={`b${y}`} x={x0} y={y} width={x1 - x0 + 1} height={1} fill={PALETTE.body} />
+        ))}
+        <rect x={5} y={11} width={6} height={1} fill={PALETTE.shade} />
+        <rect x={9} y={10} width={2} height={1} fill={PALETTE.shade} />
+        <rect x={6} y={4} width={2} height={1} fill={PALETTE.highlight} />
+        <rect x={5} y={5} width={1} height={1} fill={PALETTE.highlight} />
+        <g className={animate ? face.eyeClass : undefined}>
+          {face.eyes.map(([x, y, w, h, color], index) => (
+            <rect key={index} x={x} y={y} width={w} height={h} fill={PALETTE[color]} />
+          ))}
+        </g>
+        {face.extras.map(([x, y, w, h, color], index) => (
+          <rect key={`x${index}`} x={x} y={y} width={w} height={h} fill={PALETTE[color]} />
+        ))}
+      </svg>
+    </span>
+  )
+}

package/src/components/PluginBuilder.tsx

@@ -0,0 +1,285 @@
+import { useRef, useState } from 'react'
+import { FileUp, FolderTree, Hammer } from 'lucide-react'
+import { buildPluginArchive, validatePluginManifest } from '../../shared/plugin-package.mjs'
+import type { PluginCapability, PluginManifest } from '../../shared/plugin-package.mjs'
+import { installPluginArchive, type InstalledPlugin } from '../lib/daemon'
+import { isBinaryPath, loadPluginFolder, type PluginFolder } from '../lib/plugin-folder'
+import { formatBytes } from '../lib/utils'
+import { useUi } from '../store/ui'
+import { Switch } from './ui'
+
+const CAPABILITIES: PluginCapability[] = [
+  'workspace.list',
+  'workspace.read',
+  'workspace.write',
+  'workspace.edit',
+  'ui.commands',
+  'ui.panels',
+  'ui.themes',
+  'network.request',
+]
+
+const ACCEPT = '.js,.css,.json,.txt,.html,.svg,.png,.jpg,.jpeg,.gif,.webp,.woff,.woff2'
+
+const fieldClass =
+  'h-8 w-full rounded-lg border border-line bg-panel px-2.5 text-[12px] text-ink outline-none transition-colors placeholder:text-faint focus:border-accent/50'
+
+async function toPicked(file: File) {
+  const path = (file as File & { webkitRelativePath?: string }).webkitRelativePath || file.name
+  return { path, content: isBinaryPath(path) ? new Uint8Array(await file.arrayBuffer()) : await file.text() }
+}
+
+export function PluginBuilder({ onInstalled }: { onInstalled?: (plugin: InstalledPlugin) => void }) {
+  const notify = useUi((state) => state.notify)
+  const [id, setId] = useState('my-plugin')
+  const [name, setName] = useState('My plugin')
+  const [version, setVersion] = useState('1.0.0')
+  const [apiVersion, setApiVersion] = useState<1 | 2>(1)
+  const [capabilities, setCapabilities] = useState<PluginCapability[]>(['ui.commands'])
+  const [domains, setDomains] = useState('')
+  const [folder, setFolder] = useState<PluginFolder | null>(null)
+  const folderRef = useRef<HTMLInputElement>(null)
+  const fileRef = useRef<HTMLInputElement>(null)
+
+  const load = async (list: FileList | null) => {
+    if (!list?.length) return
+    try {
+      const picked = await Promise.all([...list].map(toPicked))
+      const next = loadPluginFolder(picked)
+      setFolder(next)
+      // A manifest.json in the folder is a starting point, not the last word: the fields below win.
+      if (next.manifest) {
+        setId(next.manifest.id)
+        setName(next.manifest.name)
+        setVersion(next.manifest.version)
+        setApiVersion(next.manifest.apiVersion === 2 ? 2 : 1)
+        setCapabilities(next.manifest.capabilities)
+        setDomains(next.manifest.domains.join(', '))
+      }
+      notify(
+        next.manifestError
+          ? `Loaded ${Object.keys(next.files).length} file(s). Its manifest.json was ignored: ${next.manifestError}`
+          : `Loaded ${Object.keys(next.files).length} file(s) — entry ${next.entry}.`,
+        next.manifestError ? 'error' : 'info',
+      )
+    } catch (error) {
+      setFolder(null)
+      notify(error instanceof Error ? error.message : 'Those files are not a plugin folder.', 'error')
+    }
+  }
+
+  const build = () => {
+    try {
+      if (!folder) throw new Error('Load a plugin folder or its files first.')
+      const manifest: PluginManifest = {
+        id: id.trim(),
+        name: name.trim(),
+        version: version.trim(),
+        apiVersion,
+        entry: folder.entry,
+        stylesheet: folder.stylesheet,
+        capabilities: apiVersion === 2 ? [] : capabilities,
+        domains: domains
+          .split(/[\s,]+/)
+          .map((entry) => entry.trim())
+          .filter(Boolean),
+      }
+      validatePluginManifest(manifest)
+      const files = { ...folder.files }
+      // A plugin with no stylesheet of its own still ships an empty one.
+      files[manifest.stylesheet] ??= ''
+      return { archive: buildPluginArchive({ manifest, files }) }
+    } catch (error) {
+      notify(error instanceof Error ? error.message : 'That package could not be built.', 'error')
+      return null
+    }
+  }
+
+  const download = () => {
+    const built = build()
+    if (!built) return
+    const url = URL.createObjectURL(new Blob([built.archive as BlobPart], { type: 'application/json' }))
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${id.trim() || 'plugin'}.plugin.json`
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const install = async () => {
+    const built = build()
+    if (!built) return
+    try {
+      const { plugin } = await installPluginArchive(built.archive)
+      onInstalled?.(plugin)
+      notify(`${plugin.manifest.name} installed. It starts sandboxed and disabled.`, 'success')
+    } catch (error) {
+      notify(error instanceof Error ? error.message : 'The daemon rejected this package.', 'error')
+    }
+  }
+
+  const loaded = folder ? Object.keys(folder.files) : []
+
+  return (
+    <details className="rounded-xl border border-line bg-raised/20">
+      <summary className="flex cursor-pointer items-center gap-2 px-3 py-2.5 text-[11.5px] font-medium text-ink">
+        <Hammer size={13} className="text-faint" />
+        Build a plugin package from a folder
+      </summary>
+      <div className="space-y-2.5 border-t border-line px-3 py-3">
+        <p className="text-[10.5px] leading-relaxed text-faint">
+          Load a plugin folder, or the files themselves. One <code className="font-mono">.js</code> entry and one
+          optional <code className="font-mono">.css</code> stylesheet become the package. A{' '}
+          <code className="font-mono">manifest.json</code> in the folder fills these fields in; the fields win.
+        </p>
+
+        <div className="flex items-center gap-2 rounded-lg border border-line bg-panel px-2.5 py-2">
+          <Switch
+            checked={apiVersion === 2}
+            onChange={(on: boolean) => setApiVersion(on ? 2 : 1)}
+            label="API v2"
+          />
+          <span className="text-[10.5px] font-medium text-ink">API v2 — free plugin (full app access)</span>
+          {apiVersion === 2 && (
+            <span className="ml-auto text-[9.5px] text-accent">ctx = Cordis kernel scope</span>
+          )}
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            onClick={() => folderRef.current?.click()}
+            className="inline-flex h-8 items-center gap-1.5 rounded-lg bg-accent px-3 text-[10.5px] font-medium text-on-accent hover:bg-accent/90"
+          >
+            <FolderTree size={12} />
+            Load folder
+          </button>
+          <button
+            type="button"
+            onClick={() => fileRef.current?.click()}
+            className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-line bg-panel px-3 text-[10.5px] font-medium text-ink hover:bg-raised"
+          >
+            <FileUp size={12} />
+            Load files
+          </button>
+          <input
+            type="file"
+            multiple
+            // React's types predate `webkitdirectory`; set it on the node instead.
+            ref={(node) => {
+              folderRef.current = node
+              if (node) node.webkitdirectory = true
+            }}
+            className="hidden"
+            onChange={(event) => {
+              void load(event.target.files)
+              event.target.value = ''
+            }}
+          />
+          <input
+            ref={fileRef}
+            type="file"
+            multiple
+            accept={ACCEPT}
+            className="hidden"
+            onChange={(event) => {
+              void load(event.target.files)
+              event.target.value = ''
+            }}
+          />
+        </div>
+
+        {folder && (
+          <div className="rounded-lg border border-line bg-panel/60 px-2.5 py-2">
+            <p className="text-[10.5px] text-muted">
+              <span className="font-medium text-ink">{loaded.length} file(s)</span> · entry{' '}
+              <code className="font-mono">{folder.entry}</code> · stylesheet{' '}
+              <code className="font-mono">{folder.stylesheet}</code>
+            </p>
+            <ul className="mt-1 space-y-0.5">
+              {loaded.slice(0, 6).map((path) => (
+                <li key={path} className="truncate font-mono text-[9.5px] text-faint">
+                  {path} · {formatBytes(
+                    typeof folder.files[path] === 'string'
+                      ? new TextEncoder().encode(folder.files[path]).length
+                      : (folder.files[path] as Uint8Array).byteLength,
+                  )}
+                </li>
+              ))}
+              {loaded.length > 6 && <li className="font-mono text-[9.5px] text-faint">+{loaded.length - 6} more</li>}
+            </ul>
+          </div>
+        )}
+
+        <div className="grid gap-2 sm:grid-cols-3">
+          <label className="block">
+            <span className="text-[10px] font-medium text-muted">Id</span>
+            <input className={fieldClass} value={id} onChange={(event) => setId(event.target.value)} />
+          </label>
+          <label className="block">
+            <span className="text-[10px] font-medium text-muted">Name</span>
+            <input className={fieldClass} value={name} onChange={(event) => setName(event.target.value)} />
+          </label>
+          <label className="block">
+            <span className="text-[10px] font-medium text-muted">Version</span>
+            <input className={fieldClass} value={version} onChange={(event) => setVersion(event.target.value)} />
+          </label>
+        </div>
+
+        <div>
+          <span className="text-[10px] font-medium text-muted">Capabilities</span>
+          <div className="mt-1 flex flex-wrap gap-1.5">
+            {apiVersion === 2 ? (
+              <p className="text-[10px] text-faint">Not needed — API v2 plugin has full access via the Cordis context.</p>
+            ) : CAPABILITIES.map((capability) => {
+              const on = capabilities.includes(capability)
+              return (
+                <button
+                  key={capability}
+                  type="button"
+                  onClick={() =>
+                    setCapabilities((current) =>
+                      on ? current.filter((entry) => entry !== capability) : [...current, capability],
+                    )
+                  }
+                  className={`rounded-full border px-2 py-1 font-mono text-[9.5px] ${
+                    on ? 'border-accent/40 bg-accent-soft text-ink' : 'border-line text-faint'
+                  }`}
+                >
+                  {capability}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        <label className="block">
+          <span className="text-[10px] font-medium text-muted">Network domains (optional, comma separated)</span>
+          <input
+            className={fieldClass}
+            value={domains}
+            placeholder="Leave empty — a plugin that needs no network declares none"
+            onChange={(event) => setDomains(event.target.value)}
+          />
+        </label>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            onClick={download}
+            className="inline-flex h-8 items-center gap-1.5 rounded-lg bg-accent px-3 text-[10.5px] font-medium text-on-accent hover:bg-accent/90"
+          >
+            Download plugin package
+          </button>
+          <button
+            type="button"
+            onClick={() => void install()}
+            className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-line bg-panel px-3 text-[10.5px] font-medium text-ink hover:bg-raised"
+          >
+            Build and install
+          </button>
+        </div>
+      </div>
+    </details>
+  )
+}