@startsimpli/ui-native 0.1.1 → 0.1.3

package/src/logic/markdown.ts

@@ -0,0 +1,112 @@
+/** Small dependency-free markdown subset for summaries, answers and transcripts:
+ *  headings, paragraphs, bullet/numbered lists, quotes, rules, fenced code, and
+ *  inline bold / italic / code / links. Unknown syntax stays literal text. */
+
+export type Inline =
+  | { type: 'text'; text: string }
+  | { type: 'bold'; children: Inline[] }
+  | { type: 'italic'; children: Inline[] }
+  | { type: 'code'; text: string }
+  | { type: 'link'; href: string; children: Inline[] };
+
+export type Block =
+  | { type: 'heading'; level: 1 | 2 | 3; inlines: Inline[] }
+  | { type: 'paragraph'; inlines: Inline[] }
+  | { type: 'bullets'; items: Inline[][] }
+  | { type: 'numbered'; items: Inline[][] }
+  | { type: 'quote'; inlines: Inline[] }
+  | { type: 'code'; text: string }
+  | { type: 'rule' };
+
+const SAFE_HREF = /^(https?:\/\/|mailto:|tel:)/i;
+
+function pushText(out: Inline[], text: string) {
+  if (!text) return;
+  const last = out[out.length - 1];
+  if (last && last.type === 'text') last.text += text;
+  else out.push({ type: 'text', text });
+}
+
+export function parseInline(src: string): Inline[] {
+  const out: Inline[] = [];
+  let i = 0;
+  while (i < src.length) {
+    const rest = src.slice(i);
+    let m: RegExpMatchArray | null;
+    if ((m = rest.match(/^`([^`\n]+)`/))) {
+      out.push({ type: 'code', text: m[1] });
+      i += m[0].length;
+    } else if ((m = rest.match(/^\[([^\]\n]+)\]\(((?:[^()\s]|\([^()\s]*\))+)\)/))) {
+      const children = parseInline(m[1]);
+      if (SAFE_HREF.test(m[2])) out.push({ type: 'link', href: m[2], children });
+      else children.forEach((c) => (c.type === 'text' ? pushText(out, c.text) : out.push(c)));
+      i += m[0].length;
+    } else if ((m = rest.match(/^\*\*(?=\S)([\s\S]+?)(?<=\S)\*\*(?!\*)/)) || (m = rest.match(/^\*\*(?=\S)([\s\S]+\*)(?<=\S)\*\*/))) {
+      out.push({ type: 'bold', children: parseInline(m[1]) });
+      i += m[0].length;
+    } else if ((m = rest.match(/^\*(?=[^\s*])([^*\n]+?)(?<=\S)\*/))) {
+      out.push({ type: 'italic', children: parseInline(m[1]) });
+      i += m[0].length;
+    } else {
+      // consume up to the next possible marker
+      const next = rest.slice(1).search(/[`[*]/);
+      const len = next === -1 ? rest.length : next + 1;
+      pushText(out, rest.slice(0, len));
+      i += len;
+    }
+  }
+  return out;
+}
+
+const BULLET = /^\s*[-*+]\s+(.*)$/;
+const NUMBERED = /^\s*\d+[.)]\s+(.*)$/;
+const HEADING = /^(#{1,6})\s+(.*?)\s*#*\s*$/;
+const RULE = /^\s*([-*_])(\s*\1){2,}\s*$/;
+const FENCE = /^\s*```/;
+
+export function parseMarkdown(src: string): Block[] {
+  const lines = src.replace(/\r\n?/g, '\n').split('\n');
+  const blocks: Block[] = [];
+  let i = 0;
+  const startsBlock = (l: string) =>
+    HEADING.test(l) || BULLET.test(l) || NUMBERED.test(l) || FENCE.test(l) || /^\s*>/.test(l) || RULE.test(l);
+
+  while (i < lines.length) {
+    const line = lines[i];
+    if (!line.trim()) { i++; continue; }
+    if (FENCE.test(line)) {
+      const body: string[] = [];
+      i++;
+      while (i < lines.length && !FENCE.test(lines[i])) body.push(lines[i++]);
+      i++; // closing fence (or end)
+      blocks.push({ type: 'code', text: body.join('\n') });
+      continue;
+    }
+    let m: RegExpMatchArray | null;
+    if ((m = line.match(HEADING))) {
+      blocks.push({ type: 'heading', level: Math.min(3, m[1].length) as 1 | 2 | 3, inlines: parseInline(m[2]) });
+      i++; continue;
+    }
+    if (RULE.test(line)) { blocks.push({ type: 'rule' }); i++; continue; }
+    if (BULLET.test(line)) {
+      const items: Inline[][] = [];
+      while (i < lines.length && (m = lines[i].match(BULLET))) { items.push(parseInline(m[1])); i++; }
+      blocks.push({ type: 'bullets', items }); continue;
+    }
+    if (NUMBERED.test(line)) {
+      const items: Inline[][] = [];
+      while (i < lines.length && (m = lines[i].match(NUMBERED))) { items.push(parseInline(m[1])); i++; }
+      blocks.push({ type: 'numbered', items }); continue;
+    }
+    if (/^\s*>/.test(line)) {
+      const body: string[] = [];
+      while (i < lines.length && /^\s*>/.test(lines[i])) body.push(lines[i++].replace(/^\s*>\s?/, ''));
+      blocks.push({ type: 'quote', inlines: parseInline(body.join('\n')) });
+      continue;
+    }
+    const para: string[] = [];
+    while (i < lines.length && lines[i].trim() && !(para.length && startsBlock(lines[i]))) para.push(lines[i++]);
+    blocks.push({ type: 'paragraph', inlines: parseInline(para.join('\n')) });
+  }
+  return blocks;
+}

package/src/logic/select.ts

@@ -0,0 +1,12 @@
+export interface SelectOption { value: string; label: string; description?: string }
+
+export function filterOptions(options: SelectOption[], query: string): SelectOption[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return options;
+  return options.filter((o) => o.label.toLowerCase().includes(q) || (o.description ?? '').toLowerCase().includes(q));
+}
+
+export function selectedLabel(options: SelectOption[], value: string | null | undefined): string | null {
+  if (value == null) return null;
+  return options.find((o) => o.value === value)?.label ?? null;
+}

package/src/logic/status.ts

@@ -0,0 +1,27 @@
+import type { BadgeVariant } from '../styles';
+
+const GROUPS: Array<[BadgeVariant, string[]]> = [
+  ['secondary', ['queued', 'pending', 'waiting', 'draft', 'new']],
+  ['default', ['processing', 'running', 'transcribing', 'in_progress', 'uploading', 'syncing', 'active']],
+  ['success', ['done', 'complete', 'completed', 'ready', 'success', 'synced', 'connected']],
+  ['destructive', ['failed', 'error', 'rejected', 'disconnected']],
+  ['warning', ['partial', 'warning', 'stale', 'needs_attention', 'paused']],
+];
+
+const norm = (s: string) => s.trim().toLowerCase().replace(/[\s-]+/g, '_');
+const title = (s: string) => {
+  const t = s.trim().replace(/[_-]+/g, ' ');
+  return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
+};
+
+/** Domain status string to a Badge variant + display label. Unknown statuses are outlined. */
+export function statusTone(status: string): { variant: BadgeVariant; label: string } {
+  const key = norm(status);
+  for (const [variant, names] of GROUPS) if (names.includes(key)) return { variant, label: title(status) };
+  return { variant: 'outline', label: title(status) };
+}
+
+export function formatProgress(value: number): string {
+  const v = Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
+  return `${Math.round(v * 100)}%`;
+}

package/src/logic/swipe.ts

@@ -0,0 +1,13 @@
+/** Swipe-row offset math. Offsets are <= 0: 0 is closed, -actionsWidth is open. */
+export function clampSwipe(offset: number, actionsWidth: number): number {
+  return Math.min(0, Math.max(-actionsWidth, offset));
+}
+
+const FLING = 0.5;
+
+/** Where a released row should settle. `velocity` is px/ms, negative = leftward. */
+export function settleSwipe(offset: number, velocity: number, actionsWidth: number): 'open' | 'closed' {
+  if (velocity <= -FLING) return 'open';
+  if (velocity >= FLING) return 'closed';
+  return -offset > actionsWidth / 2 ? 'open' : 'closed';
+}

package/src/logic/toast.ts

@@ -0,0 +1,28 @@
+export type ToastTone = 'info' | 'success' | 'error' | 'warning';
+export interface ToastItem { id: string; message: string; tone: ToastTone; durationMs: number }
+export interface ToastOptions { tone?: ToastTone; durationMs?: number }
+
+export const DEFAULT_TOAST_MS = 3000;
+
+export function createToastStore() {
+  let toasts: ToastItem[] = [];
+  let seq = 0;
+  const subs = new Set<() => void>();
+  const emit = () => subs.forEach((f) => f());
+  return {
+    getToasts: () => toasts,
+    show(message: string, opts: ToastOptions = {}): string {
+      const id = `toast-${++seq}`;
+      toasts = [...toasts, { id, message, tone: opts.tone ?? 'info', durationMs: opts.durationMs ?? DEFAULT_TOAST_MS }];
+      emit();
+      return id;
+    },
+    dismiss(id: string) {
+      if (!toasts.some((t) => t.id === id)) return;
+      toasts = toasts.filter((t) => t.id !== id);
+      emit();
+    },
+    clear() { toasts = []; emit(); },
+    subscribe(f: () => void) { subs.add(f); return () => { subs.delete(f); }; },
+  };
+}

package/src/styles-chat.ts

@@ -0,0 +1,51 @@
+/** Pure style builders for the chat surfaces: message bubble and composer. */
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { Theme } from './theme';
+
+export type ChatRole = 'user' | 'assistant' | 'system';
+
+export function bubbleStyle(theme: Theme, role: ChatRole): ViewStyle {
+  const base: ViewStyle = {
+    maxWidth: '85%',
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.sm + 2,
+    borderRadius: theme.radii.xl,
+  };
+  if (role === 'user') return { ...base, alignSelf: 'flex-end', backgroundColor: theme.colors.primary, borderBottomRightRadius: theme.radii.sm };
+  if (role === 'system') return { ...base, alignSelf: 'center', backgroundColor: 'transparent', maxWidth: '95%' };
+  return { ...base, alignSelf: 'flex-start', backgroundColor: theme.colors.muted, borderBottomLeftRadius: theme.radii.sm };
+}
+
+export function bubbleTextColor(theme: Theme, role: ChatRole): string {
+  if (role === 'user') return theme.colors.primaryForeground;
+  if (role === 'system') return theme.colors.mutedForeground;
+  return theme.colors.foreground;
+}
+
+export function composerStyle(theme: Theme): ViewStyle {
+  return {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: theme.spacing.sm,
+    paddingHorizontal: theme.spacing.md,
+    paddingTop: theme.spacing.sm,
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.border,
+    backgroundColor: theme.colors.background,
+  };
+}
+
+export function sendButtonStyle(theme: Theme, enabled: boolean): ViewStyle {
+  return {
+    width: 44,
+    height: 44,
+    borderRadius: theme.radii.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: enabled ? theme.colors.primary : theme.colors.muted,
+  };
+}
+
+export function sendGlyphStyle(theme: Theme, enabled: boolean): TextStyle {
+  return { fontSize: 20, fontWeight: '700', color: enabled ? theme.colors.primaryForeground : theme.colors.mutedForeground };
+}

package/src/styles-overlay.ts

@@ -0,0 +1,100 @@
+/** Pure style builders for overlays and chrome: sheet, toast, header, swipe actions. */
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { Theme } from './theme';
+
+export type ToneName = 'info' | 'success' | 'error' | 'warning';
+
+export function sheetBackdropStyle(): ViewStyle {
+  return { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.45)' };
+}
+
+export function sheetPanelStyle(theme: Theme, maxHeight: number, bottomInset: number): ViewStyle {
+  return {
+    maxHeight,
+    backgroundColor: theme.colors.background,
+    borderTopLeftRadius: theme.radii.xl,
+    borderTopRightRadius: theme.radii.xl,
+    paddingTop: theme.spacing.sm,
+    paddingHorizontal: theme.spacing.lg,
+    paddingBottom: bottomInset + theme.spacing.lg,
+    borderWidth: 1,
+    borderBottomWidth: 0,
+    borderColor: theme.colors.border,
+  };
+}
+
+export function sheetGrabberStyle(theme: Theme): ViewStyle {
+  return { alignSelf: 'center', width: 36, height: 5, borderRadius: 3, backgroundColor: theme.colors.border, marginBottom: theme.spacing.md };
+}
+
+export function toastStyle(theme: Theme, tone: ToneName): ViewStyle {
+  const bg: Record<ToneName, string> = {
+    info: theme.colors.foreground,
+    success: theme.colors.success,
+    error: theme.colors.destructive,
+    warning: theme.colors.warning,
+  };
+  return {
+    backgroundColor: bg[tone],
+    borderRadius: theme.radii.lg,
+    paddingVertical: theme.spacing.md,
+    paddingHorizontal: theme.spacing.lg,
+    shadowColor: '#000',
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 4,
+  };
+}
+
+export function toastTextStyle(theme: Theme, tone: ToneName): TextStyle {
+  const fg: Record<ToneName, string> = {
+    info: theme.colors.background,
+    success: theme.colors.successForeground,
+    error: theme.colors.destructiveForeground,
+    warning: theme.colors.warningForeground,
+  };
+  return { color: fg[tone], fontSize: theme.fontSizes.sm, fontWeight: theme.fontWeights.medium as TextStyle['fontWeight'] };
+}
+
+export function headerStyle(theme: Theme, topInset: number): ViewStyle {
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing.sm,
+    paddingTop: topInset + theme.spacing.sm,
+    paddingBottom: theme.spacing.sm,
+    paddingHorizontal: theme.spacing.lg,
+    backgroundColor: theme.colors.background,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+    minHeight: 52 + topInset,
+  };
+}
+
+export type SwipeTone = 'primary' | 'success' | 'destructive' | 'neutral';
+
+export function swipeActionStyle(theme: Theme, tone: SwipeTone, width: number): ViewStyle {
+  const bg: Record<SwipeTone, string> = {
+    primary: theme.colors.primary,
+    success: theme.colors.success,
+    destructive: theme.colors.destructive,
+    neutral: theme.colors.muted,
+  };
+  return { width, alignItems: 'center', justifyContent: 'center', backgroundColor: bg[tone] };
+}
+
+export function swipeActionTextStyle(theme: Theme, tone: SwipeTone): TextStyle {
+  const fg: Record<SwipeTone, string> = {
+    primary: theme.colors.primaryForeground,
+    success: theme.colors.successForeground,
+    destructive: theme.colors.destructiveForeground,
+    neutral: theme.colors.foreground,
+  };
+  return { color: fg[tone], fontSize: theme.fontSizes.sm, fontWeight: theme.fontWeights.semibold as TextStyle['fontWeight'] };
+}
+
+/** Readable red for error TEXT: the dark-scheme destructive token is a fill colour and is too dim on a dark background. */
+export function errorTextColor(theme: Theme): string {
+  return theme.scheme === 'dark' ? 'hsl(0 90% 70%)' : theme.colors.destructive;
+}

package/src/styles.ts

@@ -467,6 +467,9 @@ export function tabItemStyle(theme: Theme): ViewStyle {
     justifyContent: 'center',
     gap: 2,
     paddingVertical: theme.spacing.xs,
+    // Lets a long label shrink to the slot and ellipsize instead of widening it.
+    minWidth: 0,
+    paddingHorizontal: 2,
   };
 }