@wizardingcode/shibaox-tui 0.1.3 → 0.1.4

package/src/theme/resolve.ts

@@ -1,196 +0,0 @@
-import { RGBA, type StyleDefinitionInput } from '@opentui/core';
-
-export type Feedback = 'error' | 'warning' | 'success' | 'info' | 'running';
-export type SurfaceName = 'dialog' | 'sidebar' | 'toast';
-export type SyntaxToken =
-  | 'keyword'
-  | 'string'
-  | 'comment'
-  | 'function'
-  | 'type'
-  | 'number'
-  | 'heading'
-  | 'link';
-
-export interface ResolvedTheme {
-  text: {
-    base: RGBA;
-    muted: RGBA;
-    action: { primary: { base: RGBA; focused: RGBA; selected: RGBA; disabled: RGBA } };
-    feedback: Record<Feedback, RGBA>;
-  };
-  background: {
-    base: RGBA;
-    raised: { base: RGBA; high: RGBA; max: RGBA };
-    action: { primary: { hovered: RGBA; focused: RGBA; selected: RGBA } };
-    feedback: Record<Feedback, RGBA>;
-  };
-  border: { base: RGBA };
-  scrollbar: { base: RGBA };
-  diff: { added: RGBA; removed: RGBA; addedBg: RGBA; removedBg: RGBA };
-  syntax: Record<SyntaxToken, RGBA>;
-  /** The same theme one level up: dialogs, sidebars and toasts sit on a raised surface. */
-  surface(name: SurfaceName): ResolvedTheme;
-}
-
-type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
-
-const FEEDBACK: Feedback[] = ['error', 'warning', 'success', 'info', 'running'];
-const SYNTAX: SyntaxToken[] = [
-  'keyword',
-  'string',
-  'comment',
-  'function',
-  'type',
-  'number',
-  'heading',
-  'link',
-];
-
-function lookup(root: Json, path: string): Json | undefined {
-  let cur: Json | undefined = root;
-  for (const part of path.split('.')) {
-    if (cur === null || typeof cur !== 'object' || Array.isArray(cur)) return undefined;
-    cur = (cur as { [k: string]: Json })[part];
-  }
-  return cur;
-}
-
-/** Turns `#rrggbb` or a `$a.b.c` reference (recursively) into an RGBA; throws on a dangling ref. */
-function color(root: Json, value: Json | undefined, ref: string, depth = 0): RGBA {
-  if (typeof value !== 'string' || depth > 16) throw new Error(`theme: unresolved ${ref}`);
-  if (value.startsWith('$')) {
-    const target = lookup(root, value.slice(1));
-    if (target === undefined) throw new Error(`theme: unresolved ${value}`);
-    return color(root, target, value, depth + 1);
-  }
-  if (!/^#[0-9a-fA-F]{6}$/.test(value)) throw new Error(`theme: unresolved ${ref}`);
-  return RGBA.fromHex(value);
-}
-
-function build(get: (path: string) => RGBA): ResolvedTheme {
-  const feedback = (prefix: string): Record<Feedback, RGBA> =>
-    Object.fromEntries(FEEDBACK.map((f) => [f, get(`${prefix}.${f}`)])) as Record<Feedback, RGBA>;
-  const theme: ResolvedTheme = {
-    text: {
-      base: get('text.base'),
-      muted: get('text.muted'),
-      action: {
-        primary: {
-          base: get('text.action.primary.base'),
-          focused: get('text.action.primary.focused'),
-          selected: get('text.action.primary.selected'),
-          disabled: get('text.action.primary.disabled'),
-        },
-      },
-      feedback: feedback('text.feedback'),
-    },
-    background: {
-      base: get('background.base'),
-      raised: {
-        base: get('background.raised.base'),
-        high: get('background.raised.high'),
-        max: get('background.raised.max'),
-      },
-      action: {
-        primary: {
-          hovered: get('background.action.primary.hovered'),
-          focused: get('background.action.primary.focused'),
-          selected: get('background.action.primary.selected'),
-        },
-      },
-      feedback: feedback('background.feedback'),
-    },
-    border: { base: get('border.base') },
-    scrollbar: { base: get('scrollbar.base') },
-    diff: {
-      added: get('diff.added'),
-      removed: get('diff.removed'),
-      addedBg: get('diff.addedBg'),
-      removedBg: get('diff.removedBg'),
-    },
-    syntax: Object.fromEntries(SYNTAX.map((s) => [s, get(`syntax.${s}`)])) as Record<
-      SyntaxToken,
-      RGBA
-    >,
-    surface: () => raise(theme),
-  };
-  return theme;
-}
-
-/** Re-resolves the theme on a raised surface: each background level moves one step up. */
-function raise(base: ResolvedTheme): ResolvedTheme {
-  const theme: ResolvedTheme = {
-    ...base,
-    background: {
-      ...base.background,
-      base: base.background.raised.base,
-      raised: {
-        base: base.background.raised.high,
-        high: base.background.raised.max,
-        max: base.background.raised.max,
-      },
-    },
-    surface: () => raise(theme),
-  };
-  return theme;
-}
-
-/** Resolves a theme JSON (hue scales + semantic tokens with `$` references) into RGBA tokens. */
-export function resolveTheme(json: unknown): ResolvedTheme {
-  const root = json as Json;
-  const cache = new Map<string, RGBA>();
-  const get = (path: string): RGBA => {
-    let c = cache.get(path);
-    if (!c) {
-      c = color(root, lookup(root, path), `$${path}`);
-      cache.set(path, c);
-    }
-    return c;
-  };
-  return build(get);
-}
-
-/** What the markdown, code and diff renderables ask a `SyntaxStyle` for. */
-export function syntaxStyles(t: ResolvedTheme): Record<string, StyleDefinitionInput> {
-  const s = t.syntax;
-  return {
-    default: { fg: t.text.base },
-    conceal: { fg: t.text.muted },
-    keyword: { fg: s.keyword },
-    'keyword.function': { fg: s.keyword },
-    'keyword.return': { fg: s.keyword },
-    'keyword.import': { fg: s.keyword },
-    string: { fg: s.string },
-    'string.special': { fg: s.string },
-    comment: { fg: s.comment, italic: true },
-    function: { fg: s.function },
-    'function.call': { fg: s.function },
-    'function.method': { fg: s.function },
-    type: { fg: s.type },
-    'type.builtin': { fg: s.type },
-    number: { fg: s.number },
-    boolean: { fg: s.number },
-    constant: { fg: s.number },
-    operator: { fg: t.text.muted },
-    punctuation: { fg: t.text.muted },
-    'punctuation.bracket': { fg: t.text.muted },
-    variable: { fg: t.text.base },
-    property: { fg: t.text.base },
-    'markup.heading': { fg: s.heading, bold: true },
-    'markup.bold': { fg: t.text.base, bold: true },
-    'markup.strong': { fg: t.text.base, bold: true },
-    'markup.italic': { fg: t.text.base, italic: true },
-    'markup.raw': { fg: s.string },
-    'markup.raw.block': { fg: t.text.base },
-    'markup.raw.inline': { fg: s.string },
-    'markup.link': { fg: s.link, underline: true },
-    'markup.link.url': { fg: s.link, underline: true },
-    'markup.link.label': { fg: s.link },
-    'markup.list': { fg: s.keyword },
-    'markup.quote': { fg: t.text.muted, italic: true },
-    'markup.strikethrough': { fg: t.text.muted },
-    'diff.plus': { fg: t.diff.added },
-    'diff.minus': { fg: t.diff.removed },
-  };
-}

package/src/theme/shibaox.json

@@ -1,159 +0,0 @@
-{
-  "name": "shibaox-ink",
-  "hue": {
-    "neutral": {
-      "100": "#ffffff",
-      "200": "#e6e6e6",
-      "300": "#b8b8b8",
-      "400": "#8c8c8c",
-      "500": "#5c5c5c",
-      "600": "#262626",
-      "700": "#1c1c1c",
-      "800": "#141414",
-      "900": "#0a0a0a"
-    },
-    "interactive": {
-      "100": "#ffc79a",
-      "200": "#ffa15c",
-      "300": "#f2842b",
-      "400": "#db6716",
-      "500": "#a94a0a",
-      "600": "#3d2a17",
-      "700": "#2c1f12",
-      "800": "#1f1806",
-      "900": "#140f04"
-    },
-    "green": {
-      "100": "#a8e4bf",
-      "200": "#6fcf97",
-      "300": "#4fb374",
-      "400": "#3a9459",
-      "500": "#266e43",
-      "600": "#12301e",
-      "700": "#0e2617",
-      "800": "#0a1c11",
-      "900": "#06120b"
-    },
-    "red": {
-      "100": "#ffb3bc",
-      "200": "#ff6b6b",
-      "300": "#e85a6c",
-      "400": "#c42840",
-      "500": "#961d31",
-      "600": "#3a2024",
-      "700": "#300e14",
-      "800": "#230a0e",
-      "900": "#160609"
-    },
-    "yellow": {
-      "100": "#f8dc8f",
-      "200": "#f2c150",
-      "300": "#d9a52e",
-      "400": "#b5861a",
-      "500": "#8a5e00",
-      "600": "#35290a",
-      "700": "#2a2008",
-      "800": "#1f1806",
-      "900": "#140f04"
-    },
-    "blue": {
-      "100": "#8fbaff",
-      "200": "#5b9cff",
-      "300": "#3f7fe6",
-      "400": "#2f63b8",
-      "500": "#244b8a",
-      "600": "#1b2f3a",
-      "700": "#111e3a",
-      "800": "#0c162b",
-      "900": "#080e1c"
-    },
-    "cyan": {
-      "100": "#b0e6f0",
-      "200": "#7fd3e6",
-      "300": "#58b8cf",
-      "400": "#3a97ad",
-      "500": "#2a7185",
-      "600": "#123038",
-      "700": "#0e262c",
-      "800": "#0a1c21",
-      "900": "#061215"
-    },
-    "purple": {
-      "100": "#dcc6ff",
-      "200": "#c9a6ff",
-      "300": "#ad83f0",
-      "400": "#8b5cd6",
-      "500": "#6a41a8",
-      "600": "#2b1b48",
-      "700": "#22153a",
-      "800": "#19102b",
-      "900": "#100a1c"
-    },
-    "orange": {
-      "100": "#ffc79a",
-      "200": "#ffa15c",
-      "300": "#f2842b",
-      "400": "#db6716",
-      "500": "#a94a0a",
-      "600": "#3b2213",
-      "700": "#2c1a10",
-      "800": "#22130b",
-      "900": "#170c07"
-    }
-  },
-  "text": {
-    "base": "$hue.neutral.200",
-    "muted": "$hue.neutral.400",
-    "action": {
-      "primary": {
-        "base": "$text.base",
-        "focused": "$hue.neutral.900",
-        "selected": "$hue.interactive.200",
-        "disabled": "$hue.neutral.500"
-      }
-    },
-    "feedback": {
-      "error": "$hue.red.200",
-      "warning": "$hue.yellow.200",
-      "success": "$hue.green.200",
-      "info": "$hue.cyan.200",
-      "running": "$hue.blue.200"
-    }
-  },
-  "background": {
-    "base": "$hue.neutral.900",
-    "raised": { "base": "$hue.neutral.800", "high": "$hue.neutral.700", "max": "$hue.neutral.600" },
-    "action": {
-      "primary": {
-        "hovered": "$hue.neutral.700",
-        "focused": "$hue.interactive.200",
-        "selected": "$hue.interactive.600"
-      }
-    },
-    "feedback": {
-      "error": "$hue.red.600",
-      "warning": "$hue.yellow.600",
-      "success": "$hue.green.600",
-      "info": "$hue.cyan.600",
-      "running": "$hue.blue.600"
-    }
-  },
-  "border": { "base": "$hue.neutral.600" },
-  "scrollbar": { "base": "$hue.neutral.600" },
-  "diff": {
-    "added": "$hue.green.200",
-    "removed": "$hue.red.200",
-    "addedBg": "$hue.blue.600",
-    "removedBg": "$hue.red.600"
-  },
-  "syntax": {
-    "keyword": "$hue.purple.200",
-    "string": "$hue.green.200",
-    "comment": "$hue.neutral.400",
-    "function": "$hue.blue.200",
-    "type": "$hue.cyan.200",
-    "number": "$hue.yellow.200",
-    "heading": "$hue.orange.200",
-    "link": "$hue.cyan.200"
-  }
-}

package/src/ui/border.ts

@@ -1,20 +0,0 @@
-// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
-export const EmptyBorder = {
-  topLeft: '',
-  bottomLeft: '',
-  vertical: '',
-  topRight: '',
-  bottomRight: '',
-  horizontal: ' ',
-  bottomT: '',
-  topT: '',
-  cross: '',
-  leftT: '',
-  rightT: '',
-};
-
-/** Only the left and right edges, drawn as a heavy bar: cards, toasts, the active tab. */
-export const SplitBorder = {
-  border: ['left' as const, 'right' as const],
-  customBorderChars: { ...EmptyBorder, vertical: '┃' },
-};

package/src/ui/delayed-presence.ts

@@ -1,23 +0,0 @@
-// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
-import { type Accessor, createEffect, createSignal, onCleanup } from 'solid-js';
-
-/** True once `source` has been defined for `delay` ms; resets whenever it changes (no flicker under the delay). */
-export function createDelayedPresence<T>(
-  source: Accessor<T | undefined>,
-  delay: number | ((value: T) => number),
-): Accessor<boolean> {
-  const [visible, setVisible] = createSignal(false);
-  createEffect(() => {
-    const current = source();
-    setVisible(false);
-    if (current === undefined) return;
-    const remaining = typeof delay === 'function' ? delay(current) : delay;
-    if (remaining <= 0) {
-      setVisible(true);
-      return;
-    }
-    const timer = setTimeout(() => setVisible(true), remaining);
-    onCleanup(() => clearTimeout(timer));
-  });
-  return visible;
-}

package/src/ui/dialog.tsx

@@ -1,123 +0,0 @@
-// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
-import { RGBA, TextAttributes } from '@opentui/core';
-import { useTerminalDimensions } from '@opentui/solid';
-import {
-  type Accessor,
-  createContext,
-  For,
-  type JSX,
-  type ParentProps,
-  useContext,
-} from 'solid-js';
-import { createStore } from 'solid-js/store';
-import { useKeys } from '../context/keys.js';
-import { useTheme } from '../theme/context.js';
-
-export type DialogSize = 'medium' | 'large' | 'xlarge';
-
-export function dialogWidth(size: DialogSize): 60 | 88 | 116 {
-  if (size === 'xlarge') return 116;
-  if (size === 'large') return 88;
-  return 60;
-}
-
-/** A modal surface over a dimmed page; esc (or a click outside) calls onClose. */
-export function Dialog(
-  props: ParentProps<{
-    size?: DialogSize;
-    centered?: boolean;
-    onClose: () => void;
-    title?: string;
-  }>,
-): JSX.Element {
-  const dimensions = useTerminalDimensions();
-  const theme = useTheme().surface('dialog');
-  useKeys('dialog', (key) => {
-    if (key.name === 'escape') {
-      props.onClose();
-      return true;
-    }
-    return false;
-  });
-  return (
-    <box
-      position="absolute"
-      left={0}
-      top={0}
-      zIndex={3000}
-      width={dimensions().width}
-      height={dimensions().height}
-      alignItems="center"
-      justifyContent={props.centered ? 'center' : undefined}
-      paddingTop={props.centered ? 0 : Math.floor(dimensions().height / 4)}
-      backgroundColor={RGBA.fromInts(0, 0, 0, 150)}
-      onMouseUp={() => props.onClose()}
-    >
-      <box
-        width={dialogWidth(props.size ?? 'medium')}
-        maxWidth={dimensions().width - 2}
-        backgroundColor={theme.background.base}
-        paddingTop={1}
-        paddingBottom={1}
-        paddingLeft={2}
-        paddingRight={2}
-        flexDirection="column"
-        onMouseUp={(e: { stopPropagation(): void }) => e.stopPropagation()}
-      >
-        {props.title ? (
-          <box height={1} flexShrink={0} marginBottom={1}>
-            <text attributes={TextAttributes.BOLD} fg={theme.text.base}>
-              {props.title}
-            </text>
-          </box>
-        ) : null}
-        {props.children}
-      </box>
-    </box>
-  );
-}
-
-export interface DialogApi {
-  open(element: () => JSX.Element, o?: { onClose?: () => void }): void;
-  close(): void;
-  clear(): void;
-  depth: Accessor<number>;
-}
-
-const Context = createContext<DialogApi>();
-
-/** Keeps the dialog stack and draws it above the page. */
-export function DialogProvider(props: ParentProps): JSX.Element {
-  const [store, setStore] = createStore({
-    stack: [] as { element: () => JSX.Element; onClose?: () => void }[],
-  });
-  const api: DialogApi = {
-    open(element, o) {
-      setStore('stack', (s) => [...s, { element, onClose: o?.onClose }]);
-    },
-    close() {
-      const top = store.stack.at(-1);
-      if (!top) return;
-      setStore('stack', (s) => s.slice(0, -1));
-      top.onClose?.();
-    },
-    clear() {
-      const all = [...store.stack];
-      setStore('stack', []);
-      for (const d of all) d.onClose?.();
-    },
-    depth: () => store.stack.length,
-  };
-  return (
-    <Context.Provider value={api}>
-      {props.children}
-      <For each={store.stack}>{(d) => d.element()}</For>
-    </Context.Provider>
-  );
-}
-
-export function useDialog(): DialogApi {
-  const c = useContext(Context);
-  if (!c) throw new Error('useDialog outside DialogProvider');
-  return c;
-}

package/src/ui/layout.ts

@@ -1,23 +0,0 @@
-export const RAIL_WIDTH = 20;
-export const RAIL_BREAKPOINT = 106;
-export const SIDEBAR_WIDTH = 42;
-export const SIDEBAR_MIN = 24;
-export const SIDEBAR_MAX = 72;
-export const CONTENT_MIN = 44;
-export const SIDEBAR_AUTO_MIN = 120;
-export const MIN_COLS = 60;
-export const MIN_ROWS = 15;
-
-/** The tabs rail stands on the left from 106 columns; below that it is one line on top. */
-export const railVertical = (width: number): boolean => width >= RAIL_BREAKPOINT;
-
-/** The sidebar opens by itself when the content keeps 120 columns beside the rail. */
-export const sidebarAuto = (width: number, rail: number): boolean =>
-  width - rail >= SIDEBAR_AUTO_MIN;
-
-/** A sidebar width between 24 and 72 that leaves the content at least 44 columns. */
-export const clampSidebarWidth = (w: number, total: number): number =>
-  Math.max(SIDEBAR_MIN, Math.min(w, SIDEBAR_MAX, total - CONTENT_MIN));
-
-export const tooSmall = (width: number, height: number): boolean =>
-  width < MIN_COLS || height < MIN_ROWS;

package/src/ui/marquee.ts

@@ -1,75 +0,0 @@
-// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
-const GAP = ' · ';
-const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
-
-/** Terminal cell width of a grapheme: 2 for East Asian wide/fullwidth and most emoji, else 1. */
-export function graphemeWidth(g: string): number {
-  const cp = g.codePointAt(0) ?? 0;
-  if (cp < 0x1100) return 1;
-  if (
-    (cp >= 0x1100 && cp <= 0x115f) ||
-    (cp >= 0x2e80 && cp <= 0xa4cf) ||
-    (cp >= 0xac00 && cp <= 0xd7a3) ||
-    (cp >= 0xf900 && cp <= 0xfaff) ||
-    (cp >= 0xfe30 && cp <= 0xfe4f) ||
-    (cp >= 0xff00 && cp <= 0xff60) ||
-    (cp >= 0xffe0 && cp <= 0xffe6) ||
-    (cp >= 0x1f300 && cp <= 0x1faff) ||
-    (cp >= 0x20000 && cp <= 0x3fffd)
-  )
-    return 2;
-  return 1;
-}
-
-export function graphemes(value: string): string[] {
-  return [...segmenter.segment(value)].map((s) => s.segment);
-}
-
-export function stringWidth(value: string): number {
-  return graphemes(value).reduce((w, g) => w + graphemeWidth(g), 0);
-}
-
-/** The longest prefix of `value` that fits in `width` cells. */
-export function takeWidth(value: string, width: number): string {
-  let out = '';
-  let w = 0;
-  for (const g of graphemes(value)) {
-    const gw = graphemeWidth(g);
-    if (w + gw > width) break;
-    out += g;
-    w += gw;
-  }
-  return out;
-}
-
-export function marqueeCycleWidth(value: string): number {
-  return stringWidth(value + GAP);
-}
-
-export function marqueeOverflows(value: string, width: number): boolean {
-  return stringWidth(value) > width;
-}
-
-/** `value` scrolled by `offset` cells inside `width`, looping with a ` · ` gap; unscrolled when it fits. */
-export function marqueeText(value: string, width: number, offset: number): string {
-  if (width <= 0) return '';
-  if (stringWidth(value) <= width || offset <= 0) return takeWidth(value, width);
-  const loop = [...graphemes(value), ...graphemes(GAP)];
-  const cursor = offset % marqueeCycleWidth(value);
-  const parts = [...loop, ...loop];
-  let start = 0;
-  let skipped = 0;
-  while (start < parts.length && skipped < cursor) {
-    skipped += graphemeWidth(parts[start] ?? '');
-    start++;
-  }
-  let out = '';
-  let w = 0;
-  for (const g of parts.slice(start)) {
-    const gw = graphemeWidth(g);
-    if (w + gw > width) break;
-    out += g;
-    w += gw;
-  }
-  return out;
-}

package/src/ui/pane-resize.ts

@@ -1,77 +0,0 @@
-// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
-import { MouseButton, type MouseEvent } from '@opentui/core';
-import { createEffect, createSignal } from 'solid-js';
-
-/** Drag state for a pane edge: the size while dragging, and a commit when the pointer releases. */
-export function createPaneResize(options: {
-  value: () => number;
-  defaultValue: () => number;
-  clamp: (size: number) => number;
-  fromMouse: (event: MouseEvent) => number;
-  contains: (event: MouseEvent, size: number) => boolean;
-  onCommit: (size: number) => void;
-}) {
-  const [preferredSize, setPreferredSize] = createSignal(options.value());
-  const [hovered, setHovered] = createSignal(false);
-  const [resizing, setResizing] = createSignal(false);
-  let requestedSize = options.value();
-  createEffect(() => {
-    if (resizing()) return;
-    requestedSize = options.value();
-    setPreferredSize(requestedSize);
-  });
-  const size = () => options.clamp(preferredSize());
-  const commit = (value: number) => {
-    const next = options.clamp(value);
-    setPreferredSize(next);
-    if (requestedSize === next) return;
-    requestedSize = next;
-    options.onCommit(next);
-  };
-  let moved = false;
-  let lastBoundaryClick = 0;
-  const finish = (event: MouseEvent) => {
-    if (!resizing()) return;
-    const next = moved ? options.fromMouse(event) : size();
-    setResizing(false);
-    lastBoundaryClick = moved ? 0 : Date.now();
-    commit(next);
-    setHovered(options.contains(event, options.clamp(next)));
-    event.stopPropagation();
-  };
-  // Bind drag/release on the parent so resizing continues outside the handle.
-  return {
-    preferredSize,
-    size,
-    hovered,
-    resizing,
-    onMouseOver: () => setHovered(true),
-    onMouseOut: () => setHovered(false),
-    onMouseDown: (event: MouseEvent) => {
-      if (event.button !== MouseButton.LEFT) return;
-      const now = Date.now();
-      if (now - lastBoundaryClick < 300) {
-        lastBoundaryClick = 0;
-        setResizing(false);
-        setHovered(false);
-        commit(options.defaultValue());
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-      moved = false;
-      setResizing(true);
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    onMouseDrag: (event: MouseEvent) => {
-      if (!resizing()) return;
-      moved = true;
-      lastBoundaryClick = 0;
-      setPreferredSize(options.clamp(options.fromMouse(event)));
-      event.stopPropagation();
-    },
-    onMouseDragEnd: finish,
-    onMouseUp: finish,
-  };
-}