giggles 0.3.6 → 0.3.8

package/dist/{chunk-FEQYHTG7.js → chunk-OYQZHF73.js}

@@ -452,30 +452,6 @@ function FocusTrap({ children }) {
   return /* @__PURE__ */ jsx5(FocusNodeContext.Provider, { value: id, children });
 }
 
-// src/core/theme.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var defaultTheme = {
-  accentColor: "#6B9FD4",
-  selectedColor: "#8FBF7F",
-  hintColor: "#8A8A8A",
-  hintDimColor: "#5C5C5C",
-  hintHighlightColor: "#D4D4D4",
-  hintHighlightDimColor: "#A0A0A0",
-  indicator: "\u25B8",
-  checkedIndicator: "\u2713",
-  uncheckedIndicator: "\u25CB"
-};
-var ThemeContext = createContext4(defaultTheme);
-function ThemeProvider({ theme, children }) {
-  const parent = useContext4(ThemeContext);
-  const merged = { ...parent, ...theme };
-  return /* @__PURE__ */ jsx6(ThemeContext.Provider, { value: merged, children });
-}
-function useTheme() {
-  return useContext4(ThemeContext);
-}
-
 export {
   GigglesError,
   FocusProvider,
@@ -488,7 +464,5 @@ export {
   FocusTrap,
   useFocus,
   FocusGroup,
-  useFocusState,
-  ThemeProvider,
-  useTheme
+  useFocusState
 };

package/dist/chunk-PVXJL6SX.js

@@ -0,0 +1,29 @@
+// src/core/theme.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var defaultTheme = {
+  accentColor: "#6B9FD4",
+  borderColor: "#5C5C5C",
+  selectedColor: "#8FBF7F",
+  hintColor: "#8A8A8A",
+  hintDimColor: "#5C5C5C",
+  hintHighlightColor: "#D4D4D4",
+  hintHighlightDimColor: "#A0A0A0",
+  indicator: "\u25B8",
+  checkedIndicator: "\u2713",
+  uncheckedIndicator: "\u25CB"
+};
+var ThemeContext = createContext(defaultTheme);
+function ThemeProvider({ theme, children }) {
+  const parent = useContext(ThemeContext);
+  const merged = { ...parent, ...theme };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: merged, children });
+}
+function useTheme() {
+  return useContext(ThemeContext);
+}
+
+export {
+  ThemeProvider,
+  useTheme
+};

package/dist/chunk-TFYBLNEZ.js

@@ -0,0 +1,93 @@
+import {
+  useTheme
+} from "./chunk-PVXJL6SX.js";
+
+// src/ui/CodeBlock.tsx
+import Prism from "prismjs";
+import { Box, Text } from "ink";
+import { jsx } from "react/jsx-runtime";
+var defaultTokenColors = {
+  keyword: "#C678DD",
+  string: "#98C379",
+  number: "#D19A66",
+  comment: "#5C6370",
+  function: "#61AFEF",
+  operator: "#56B6C2",
+  punctuation: "#ABB2BF",
+  builtin: "#E5C07B",
+  className: "#E5C07B",
+  inserted: "#98C379",
+  deleted: "#E06C75"
+};
+function CodeBlock({ children, language, showBorder = true, tokenColors }) {
+  const theme = useTheme();
+  const colors = { ...defaultTokenColors, ...tokenColors };
+  const grammar = language ? Prism.languages[language] : void 0;
+  const content = grammar ? renderTokens(Prism.tokenize(children, grammar), colors) : /* @__PURE__ */ jsx(Text, { children });
+  if (!showBorder) {
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { children: content }) });
+  }
+  return /* @__PURE__ */ jsx(Box, { paddingX: 1, borderStyle: "single", borderColor: theme.borderColor, children: /* @__PURE__ */ jsx(Text, { children: content }) });
+}
+function renderTokens(tokens, colors) {
+  return tokens.map((token, idx) => {
+    if (typeof token === "string") {
+      return /* @__PURE__ */ jsx(Text, { children: token }, idx);
+    }
+    const color = getTokenColor(token.type, colors);
+    const content = Array.isArray(token.content) ? renderTokens(token.content, colors) : typeof token.content === "string" ? token.content : renderTokens([token.content], colors);
+    return color ? /* @__PURE__ */ jsx(Text, { color, children: content }, idx) : /* @__PURE__ */ jsx(Text, { children: content }, idx);
+  });
+}
+function getTokenColor(type, colors) {
+  switch (type) {
+    case "keyword":
+    case "tag":
+    case "boolean":
+    case "important":
+      return colors.keyword;
+    case "string":
+    case "char":
+    case "template-string":
+    case "attr-value":
+      return colors.string;
+    case "number":
+      return colors.number;
+    case "comment":
+    case "prolog":
+    case "doctype":
+    case "cdata":
+      return colors.comment;
+    case "function":
+    case "function-variable":
+      return colors.function;
+    case "operator":
+    case "arrow":
+      return colors.operator;
+    case "punctuation":
+      return colors.punctuation;
+    case "builtin":
+    case "constant":
+    case "symbol":
+      return colors.builtin;
+    case "class-name":
+    case "maybe-class-name":
+      return colors.className;
+    case "attr-name":
+      return colors.function;
+    case "inserted-sign":
+    case "inserted":
+      return colors.inserted;
+    case "deleted-sign":
+    case "deleted":
+      return colors.deleted;
+    case "unchanged":
+      return colors.comment;
+    default:
+      return void 0;
+  }
+}
+
+export {
+  CodeBlock
+};

package/dist/index.d.ts

@@ -11,6 +11,7 @@ declare class GigglesError extends Error {
 
 type GigglesTheme = {
     accentColor: string;
+    borderColor: string;
     selectedColor: string;
     hintColor: string;
     hintDimColor: string;

package/dist/index.js

@@ -9,14 +9,16 @@ import {
   GigglesError,
   InputProvider,
   InputRouter,
-  ThemeProvider,
   useFocus,
   useFocusContext,
   useFocusState,
   useKeybindingRegistry,
-  useKeybindings,
+  useKeybindings
+} from "./chunk-OYQZHF73.js";
+import {
+  ThemeProvider,
   useTheme
-} from "./chunk-FEQYHTG7.js";
+} from "./chunk-PVXJL6SX.js";
 
 // src/core/GigglesProvider.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/markdown/index.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MarkdownProps = {
+    children: string;
+};
+declare function Markdown({ children }: MarkdownProps): react_jsx_runtime.JSX.Element;
+
+export { Markdown };

package/dist/markdown/index.js

@@ -0,0 +1,122 @@
+import {
+  CodeBlock
+} from "../chunk-TFYBLNEZ.js";
+import {
+  useTheme
+} from "../chunk-PVXJL6SX.js";
+
+// src/ui/Markdown.tsx
+import Table from "cli-table3";
+import { marked } from "marked";
+import { useMemo } from "react";
+import { Box, Text } from "ink";
+import Link from "ink-link";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Markdown({ children }) {
+  const tokens = useMemo(() => marked.lexer(children), [children]);
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: tokens.map((token, idx) => /* @__PURE__ */ jsx(TokenRenderer, { token }, idx)) });
+}
+function TokenRenderer({ token }) {
+  var _a, _b;
+  const theme = useTheme();
+  switch (token.type) {
+    case "heading":
+      return /* @__PURE__ */ jsx(Box, { marginTop: token.depth === 1 ? 0 : 1, children: /* @__PURE__ */ jsx(Text, { bold: true, underline: token.depth === 1, children: renderInline(token.tokens, theme) }) });
+    case "paragraph": {
+      const hasLinks = (_a = token.tokens) == null ? void 0 : _a.some(
+        (t) => {
+          var _a2;
+          return t.type === "link" || t.type === "strong" && "tokens" in t && ((_a2 = t.tokens) == null ? void 0 : _a2.some((st) => st.type === "link"));
+        }
+      );
+      if (hasLinks) {
+        return /* @__PURE__ */ jsx(Box, { flexDirection: "row", flexWrap: "wrap", children: renderInline(token.tokens, theme) });
+      }
+      return /* @__PURE__ */ jsx(Text, { children: renderInline(token.tokens, theme) });
+    }
+    case "code":
+      return /* @__PURE__ */ jsx(Box, { marginY: 1, children: /* @__PURE__ */ jsx(CodeBlock, { language: token.lang || void 0, children: token.text }) });
+    case "blockquote":
+      return /* @__PURE__ */ jsxs(Box, { marginY: 1, children: [
+        /* @__PURE__ */ jsx(Text, { color: theme.borderColor, children: "\u2502 " }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: (_b = token.tokens) == null ? void 0 : _b.map((t, idx) => /* @__PURE__ */ jsx(TokenRenderer, { token: t }, idx)) })
+      ] });
+    case "list":
+      return /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginY: 1, children: token.items.map((item, idx) => /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Text, { children: token.ordered ? `${idx + 1}. ` : "\u2022 " }),
+        /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: item.tokens.map((t, i) => /* @__PURE__ */ jsx(TokenRenderer, { token: t }, i)) })
+      ] }, idx)) });
+    case "table":
+      return /* @__PURE__ */ jsx(TableRenderer, { token });
+    case "hr":
+      return /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(40) });
+    case "space":
+      return null;
+    default:
+      if ("text" in token && typeof token.text === "string") {
+        return /* @__PURE__ */ jsx(Text, { children: token.text });
+      }
+      return null;
+  }
+}
+function TableRenderer({ token }) {
+  const table = new Table({
+    head: token.header.map((cell) => renderInlineToString(cell.tokens)),
+    style: { head: [], border: [] }
+  });
+  for (const row of token.rows) {
+    table.push(row.map((cell) => renderInlineToString(cell.tokens)));
+  }
+  return /* @__PURE__ */ jsx(Text, { children: table.toString() });
+}
+function renderInline(tokens, theme) {
+  if (!tokens) return null;
+  return tokens.map((token, idx) => {
+    switch (token.type) {
+      case "text":
+        return /* @__PURE__ */ jsx(Text, { children: token.text }, idx);
+      case "strong":
+        return /* @__PURE__ */ jsx(Text, { bold: true, children: renderInline(token.tokens, theme) }, idx);
+      case "em":
+        return /* @__PURE__ */ jsx(Text, { italic: true, children: renderInline(token.tokens, theme) }, idx);
+      case "codespan":
+        return /* @__PURE__ */ jsxs(Text, { color: theme.accentColor, children: [
+          "`",
+          token.text,
+          "`"
+        ] }, idx);
+      case "link":
+        return /* @__PURE__ */ jsx(Link, { url: token.href, children: /* @__PURE__ */ jsx(Text, { color: theme.accentColor, children: renderInlineToString(token.tokens) }) }, idx);
+      case "image":
+        return /* @__PURE__ */ jsxs(Text, { color: theme.accentColor, children: [
+          "[Image: ",
+          token.text || token.href,
+          "]"
+        ] }, idx);
+      case "br":
+        return /* @__PURE__ */ jsx(Text, { children: "\n" }, idx);
+      case "del":
+        return /* @__PURE__ */ jsx(Text, { strikethrough: true, children: renderInline(token.tokens, theme) }, idx);
+      default:
+        if ("text" in token && typeof token.text === "string") {
+          return /* @__PURE__ */ jsx(Text, { children: token.text }, idx);
+        }
+        return null;
+    }
+  });
+}
+function renderInlineToString(tokens) {
+  if (!tokens) return "";
+  return tokens.map((token) => {
+    if ("text" in token && typeof token.text === "string") {
+      return token.text;
+    }
+    if ("tokens" in token && Array.isArray(token.tokens)) {
+      return renderInlineToString(token.tokens);
+    }
+    return "";
+  }).join("");
+}
+export {
+  Markdown
+};

package/dist/ui/index.d.ts

@@ -159,4 +159,52 @@ type ViewportProps<T> = {
 };
 declare function Viewport<T>({ items, maxVisible, showLineNumbers, gap, paginatorStyle, render }: ViewportProps<T>): react_jsx_runtime.JSX.Element;
 
-export { Autocomplete, type AutocompleteRenderProps, CommandPalette, type CommandPaletteRenderProps, Confirm, MultiSelect, type MultiSelectRenderProps, Paginator, type PaginatorStyle, Select, type SelectOption, type SelectRenderProps, TextInput, type TextInputRenderProps, Viewport, type ViewportRenderProps, VirtualList, type VirtualListRenderProps };
+type BorderStyle = 'single' | 'double' | 'round' | 'bold' | 'singleDouble' | 'doubleSingle' | 'classic' | 'arrow';
+type ModalProps = {
+    children: React__default.ReactNode;
+    onClose: () => void;
+    title?: string;
+    borderStyle?: BorderStyle;
+};
+declare function Modal({ children, onClose, title, borderStyle }: ModalProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = 'round' | 'arrow' | 'plain';
+type BadgeProps = {
+    children: string;
+    color?: string;
+    background?: string;
+    variant?: BadgeVariant;
+};
+declare function Badge({ children, color, background, variant }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type PanelProps = {
+    children: React__default.ReactNode;
+    title?: string;
+    width?: number;
+    borderColor?: string;
+    footer?: React__default.ReactNode;
+};
+declare function Panel({ children, title, width, borderColor, footer }: PanelProps): react_jsx_runtime.JSX.Element;
+
+type TokenColors = {
+    keyword: string;
+    string: string;
+    number: string;
+    comment: string;
+    function: string;
+    operator: string;
+    punctuation: string;
+    builtin: string;
+    className: string;
+    inserted: string;
+    deleted: string;
+};
+type CodeBlockProps = {
+    children: string;
+    language?: string;
+    showBorder?: boolean;
+    tokenColors?: Partial<TokenColors>;
+};
+declare function CodeBlock({ children, language, showBorder, tokenColors }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+export { Autocomplete, type AutocompleteRenderProps, Badge, type BadgeProps, type BadgeVariant, CodeBlock, CommandPalette, type CommandPaletteRenderProps, Confirm, Modal, MultiSelect, type MultiSelectRenderProps, Paginator, type PaginatorStyle, Panel, type PanelProps, Select, type SelectOption, type SelectRenderProps, TextInput, type TextInputRenderProps, type TokenColors, Viewport, type ViewportRenderProps, VirtualList, type VirtualListRenderProps };

package/dist/ui/index.js

@@ -3,9 +3,14 @@ import {
   GigglesError,
   useFocus,
   useKeybindingRegistry,
-  useKeybindings,
+  useKeybindings
+} from "../chunk-OYQZHF73.js";
+import {
+  CodeBlock
+} from "../chunk-TFYBLNEZ.js";
+import {
   useTheme
-} from "../chunk-FEQYHTG7.js";
+} from "../chunk-PVXJL6SX.js";
 
 // src/ui/CommandPalette.tsx
 import { useState } from "react";
@@ -728,12 +733,120 @@ function Viewport({ items, maxVisible, showLineNumbers, gap, paginatorStyle, ren
     }
   );
 }
+
+// src/ui/Modal.tsx
+import { Box as Box7, Text as Text9 } from "ink";
+import { jsx as jsx9, jsxs as jsxs10 } from "react/jsx-runtime";
+function ModalInner({ children, onClose, title, borderStyle = "round" }) {
+  const focus = useFocus();
+  const theme = useTheme();
+  useKeybindings(focus, {
+    escape: onClose
+  });
+  return /* @__PURE__ */ jsxs10(
+    Box7,
+    {
+      flexDirection: "column",
+      alignSelf: "flex-start",
+      borderStyle,
+      borderColor: theme.borderColor,
+      paddingX: 1,
+      children: [
+        title != null && /* @__PURE__ */ jsx9(Text9, { bold: true, children: title }),
+        children
+      ]
+    }
+  );
+}
+function Modal({ children, onClose, title, borderStyle }) {
+  return /* @__PURE__ */ jsx9(FocusTrap, { children: /* @__PURE__ */ jsx9(ModalInner, { onClose, title, borderStyle, children }) });
+}
+
+// src/ui/Badge.tsx
+import { Text as Text10 } from "ink";
+import { jsx as jsx10, jsxs as jsxs11 } from "react/jsx-runtime";
+var glyphs = {
+  round: ["\uE0B6", "\uE0B4"],
+  arrow: ["\uE0B2", "\uE0B0"],
+  plain: ["", ""]
+};
+function Badge({ children, color, background, variant = "round" }) {
+  const theme = useTheme();
+  const bg = background ?? theme.accentColor;
+  const fg = color ?? "#000000";
+  const [left, right] = glyphs[variant];
+  const label = variant === "plain" ? ` ${children} ` : children;
+  return /* @__PURE__ */ jsxs11(Text10, { children: [
+    left && /* @__PURE__ */ jsx10(Text10, { color: bg, children: left }),
+    /* @__PURE__ */ jsx10(Text10, { color: fg, backgroundColor: bg, bold: true, children: label }),
+    right && /* @__PURE__ */ jsx10(Text10, { color: bg, children: right })
+  ] });
+}
+
+// src/ui/Panel.tsx
+import { useState as useState7 } from "react";
+import { Box as Box8, Text as Text11, measureElement } from "ink";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs12 } from "react/jsx-runtime";
+function Panel({ children, title, width, borderColor, footer }) {
+  const theme = useTheme();
+  const color = borderColor ?? theme.borderColor;
+  const [measuredWidth, setMeasuredWidth] = useState7(width ?? 0);
+  const effectiveWidth = width ?? measuredWidth;
+  const renderTopBorder = () => {
+    if (effectiveWidth === 0) return null;
+    if (title == null) {
+      return /* @__PURE__ */ jsxs12(Text11, { color, children: [
+        "\u256D",
+        "\u2500".repeat(Math.max(0, effectiveWidth - 2)),
+        "\u256E"
+      ] });
+    }
+    const maxTitleWidth = Math.max(0, effectiveWidth - 5);
+    const displayTitle = title.length > maxTitleWidth ? title.slice(0, maxTitleWidth - 1) + "\u2026" : title;
+    const titlePart = `\u256D ${displayTitle} `;
+    const totalDashes = Math.max(1, effectiveWidth - titlePart.length - 1);
+    return /* @__PURE__ */ jsxs12(Text11, { children: [
+      /* @__PURE__ */ jsx11(Text11, { color, children: "\u256D " }),
+      /* @__PURE__ */ jsx11(Text11, { color, bold: true, children: displayTitle }),
+      /* @__PURE__ */ jsxs12(Text11, { color, children: [
+        " ",
+        "\u2500".repeat(totalDashes),
+        "\u256E"
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs12(
+    Box8,
+    {
+      flexDirection: "column",
+      width,
+      flexGrow: width == null ? 1 : void 0,
+      ref: (node) => {
+        if (node) {
+          const { width: w } = measureElement(node);
+          if (w !== measuredWidth) setMeasuredWidth(w);
+        }
+      },
+      children: [
+        renderTopBorder(),
+        /* @__PURE__ */ jsx11(Box8, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderTop: false, borderColor: color, paddingX: 1, children: footer ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
+          /* @__PURE__ */ jsx11(Box8, { flexDirection: "column", flexGrow: 1, children }),
+          footer
+        ] }) : children })
+      ]
+    }
+  );
+}
 export {
   Autocomplete,
+  Badge,
+  CodeBlock,
   CommandPalette,
   Confirm,
+  Modal,
   MultiSelect,
   Paginator,
+  Panel,
   Select,
   TextInput,
   Viewport,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "giggles",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,6 +21,10 @@
     "./ui": {
       "import": "./dist/ui/index.js",
       "types": "./dist/ui/index.d.ts"
+    },
+    "./markdown": {
+      "import": "./dist/markdown/index.js",
+      "types": "./dist/markdown/index.d.ts"
     }
   },
   "keywords": [
@@ -37,7 +41,7 @@
     "build": "tsup",
     "build:watch": "nodemon --watch src --ext ts,tsx --exec tsup",
     "dev": "tsx --watch playground/index.tsx",
-    "dev:docs": "pnpm build && cd documentation && pnpm link ../ && pnpm dev",
+    "dev:docs": "pnpm build && pnpm --filter documentation dev",
     "lint": "prettier --write . && eslint . --fix"
   },
   "files": [
@@ -50,6 +54,7 @@
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/node": "^22.0.0",
+    "@types/prismjs": "^1.26.6",
     "@types/react": "^19.2.13",
     "eslint": "^9.0.0",
     "eslint-plugin-react": "^7.32.2",
@@ -64,6 +69,10 @@
     "typescript-eslint": "^8.0.0"
   },
   "dependencies": {
-    "execa": "^9.6.1"
+    "cli-table3": "^0.6.5",
+    "execa": "^9.6.1",
+    "ink-link": "^5.0.0",
+    "marked": "^17.0.3",
+    "prismjs": "^1.30.0"
   }
 }