@openpkg-ts/ui 0.6.1 → 0.6.2

package/dist/docskit/index.d.ts

@@ -687,4 +687,23 @@ interface TypeBadgeProps extends React13.HTMLAttributes<HTMLSpanElement> {
 * Automatically detects type category and applies appropriate color.
 */
 declare const TypeBadge: React13.ForwardRefExoticComponent<TypeBadgeProps & React13.RefAttributes<HTMLSpanElement>>;
-export { wordWrap2 as wordWrap, useSyncSection, useSyncScroll, typeBadgeVariants, tooltip, toCodeGroup, theme, mark, link, lineNumbers2 as lineNumbers, hover, flagsToOptions, expandable, endpointBadgeVariants, diff, collapse, callout, addDocsKit, WithNotes, WithHover, TypeColor, TypeBadgeProps, TypeBadge, TooltipLink, TerminalSkeleton, Terminal, TabsTrigger, TabsList, TabsContent, Tabs, SyncScrollProviderProps, SyncScrollProvider, SyncScrollContextValue, SingleCode, ResponseBlockProps, ResponseBlock, ParameterListProps, ParameterList, PackageInstall, NestedParameterToggleProps, NestedParameterToggle, NestedParameterContainerProps, NestedParameterContainer, MultiCode, MethodSectionProps, MethodSection, LanguageSelectorProps, LanguageSelector, Language, InlineCodeSkeleton, ImportSectionProps, ImportSection, HttpMethod, HoverLink, ExpandableParameterProps, ExpandableParameter, ExampleSectionProps, CodeExample2 as ExampleSectionCodeExample, ExampleSection, ExampleChipsProps, ExampleChips, ExampleChip, EnumValuesSectionProps, EnumValuesSection, EnumValue, EndpointHeaderProps, EndpointHeader, EndpointBadgeProps, EndpointBadge, DocsKitInlineCode, DocsKitCode, DiffStats, CopyButton, CollapsiblePanelProps, CollapsiblePanel, CodeTabsSkeleton, CodeInfo, CodeIcon, CodeGroup, CodeExample, CodeBlockSkeleton, CodeBlockProps, CodeBlock, Code, ClientTerminal, ClientInlineCode, ClientDocsKitCode, ClientDiffCodeProps, ClientDiffCode, ClientCode, APISectionProps, APISection, APIReferencePageProps, APIReferencePage, APIReferenceLayoutProps, APIReferenceLayout, APIParameterSchema, APIParameterItemProps, APIParameterItem, APICodePanelProps, APICodePanel };
+interface RunnableSnippetProps {
+	/** Code to display */
+	code: string;
+	/** Language for syntax highlighting */
+	language?: string;
+	/** Optional title */
+	title?: string;
+	/** For demo: mock execution state */
+	mockState?: "idle" | "running" | "success" | "error";
+	/** For demo: mock output data */
+	mockOutput?: string;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Interactive code block with run button and output display.
+* Currently uses mock states; will be wired to sandbox execution in Phase 2.
+*/
+declare function RunnableSnippet({ code, language, title, mockState, mockOutput, className }: RunnableSnippetProps): React.ReactNode;
+export { wordWrap2 as wordWrap, useSyncSection, useSyncScroll, typeBadgeVariants, tooltip, toCodeGroup, theme, mark, link, lineNumbers2 as lineNumbers, hover, flagsToOptions, expandable, endpointBadgeVariants, diff, collapse, callout, addDocsKit, WithNotes, WithHover, TypeColor, TypeBadgeProps, TypeBadge, TooltipLink, TerminalSkeleton, Terminal, TabsTrigger, TabsList, TabsContent, Tabs, SyncScrollProviderProps, SyncScrollProvider, SyncScrollContextValue, SingleCode, RunnableSnippetProps, RunnableSnippet, ResponseBlockProps, ResponseBlock, ParameterListProps, ParameterList, PackageInstall, NestedParameterToggleProps, NestedParameterToggle, NestedParameterContainerProps, NestedParameterContainer, MultiCode, MethodSectionProps, MethodSection, LanguageSelectorProps, LanguageSelector, Language, InlineCodeSkeleton, ImportSectionProps, ImportSection, HttpMethod, HoverLink, ExpandableParameterProps, ExpandableParameter, ExampleSectionProps, CodeExample2 as ExampleSectionCodeExample, ExampleSection, ExampleChipsProps, ExampleChips, ExampleChip, EnumValuesSectionProps, EnumValuesSection, EnumValue, EndpointHeaderProps, EndpointHeader, EndpointBadgeProps, EndpointBadge, DocsKitInlineCode, DocsKitCode, DiffStats, CopyButton, CollapsiblePanelProps, CollapsiblePanel, CodeTabsSkeleton, CodeInfo, CodeIcon, CodeGroup, CodeExample, CodeBlockSkeleton, CodeBlockProps, CodeBlock, Code, ClientTerminal, ClientInlineCode, ClientDocsKitCode, ClientDiffCodeProps, ClientDiffCode, ClientCode, APISectionProps, APISection, APIReferencePageProps, APIReferencePage, APIReferenceLayoutProps, APIReferenceLayout, APIParameterSchema, APIParameterItemProps, APIParameterItem, APICodePanelProps, APICodePanel };

package/dist/docskit/index.js

@@ -196,9 +196,10 @@ var line = {
     return /* @__PURE__ */ jsx5("div", {
       style: {
         borderLeftColor: "var(--openpkg-line-border, transparent)",
-        backgroundColor: "var(--openpkg-line-bg, transparent)"
+        backgroundColor: "var(--openpkg-line-bg, transparent)",
+        transition: "background-color 0.3s ease"
       },
-      className: "flex border-l-2 border-l-transparent background-color 0.3s ease",
+      className: "flex border-l-2 border-l-transparent",
       children: /* @__PURE__ */ jsx5(InnerLine2, {
         merge: props,
         className: "px-3 flex-1"
@@ -683,10 +684,10 @@ var wordWrap = {
 // src/docskit/code.handlers.tsx
 function getHandlers(options) {
   return [
-    line,
-    options.lineNumbers && lineNumbers,
     mark,
     diff,
+    line,
+    options.lineNumbers && lineNumbers,
     link,
     callout,
     ...collapse,
@@ -2834,6 +2835,82 @@ var TypeBadge = React8.forwardRef(({ className, type, typeColor, ...props }, ref
   });
 });
 TypeBadge.displayName = "TypeBadge";
+// src/docskit/runnable-snippet.tsx
+import { Loader2, Play } from "lucide-react";
+import { useState as useState16 } from "react";
+import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+
+function RunnableSnippet({
+  code,
+  language = "typescript",
+  title,
+  mockState = "idle",
+  mockOutput,
+  className
+}) {
+  const [state, setState] = useState16(mockState);
+  const [output, setOutput] = useState16(mockOutput ?? null);
+  const [duration, setDuration] = useState16(0);
+  const handleRun = () => {
+    setState("running");
+    setOutput(null);
+    const startTime = Date.now();
+    setTimeout(() => {
+      const elapsed = Date.now() - startTime;
+      setDuration(elapsed);
+      if (mockState === "error") {
+        setState("error");
+        setOutput(mockOutput ?? "Error: Execution failed");
+      } else {
+        setState("success");
+        setOutput(mockOutput ?? JSON.stringify({ result: "success", timestamp: new Date().toISOString() }, null, 2));
+      }
+    }, 1200);
+  };
+  const codeblock = {
+    value: code,
+    lang: language,
+    meta: title
+  };
+  return /* @__PURE__ */ jsxs31("div", {
+    className: cn("relative", className),
+    children: [
+      /* @__PURE__ */ jsxs31("div", {
+        className: "relative group",
+        children: [
+          /* @__PURE__ */ jsx53(ClientDocsKitCode, {
+            codeblock
+          }),
+          /* @__PURE__ */ jsx53("button", {
+            type: "button",
+            onClick: handleRun,
+            disabled: state === "running",
+            className: cn("absolute right-3 top-3 z-10", "size-8 flex items-center justify-center", "rounded border border-openpkg-code-border bg-openpkg-code-bg", "text-openpkg-code-text-inactive", "cursor-pointer transition-opacity duration-200", "opacity-0 group-hover:opacity-100", state === "running" && "cursor-not-allowed opacity-100"),
+            "aria-label": "Run code",
+            children: state === "running" ? /* @__PURE__ */ jsx53(Loader2, {
+              size: 16,
+              className: "animate-spin"
+            }) : /* @__PURE__ */ jsx53(Play, {
+              size: 16,
+              className: "fill-current"
+            })
+          })
+        ]
+      }),
+      output && /* @__PURE__ */ jsx53("div", {
+        className: "-mt-4",
+        children: /* @__PURE__ */ jsx53(CollapsiblePanel, {
+          title: `${state === "success" ? "✓ Success" : "✕ Error"} | ${duration}ms`,
+          defaultExpanded: true,
+          children: /* @__PURE__ */ jsx53("pre", {
+            className: "p-4 m-0 text-xs font-mono overflow-auto max-h-[400px]",
+            children: output
+          })
+        })
+      })
+    ]
+  });
+}
 export {
   wordWrap,
   useSyncSection,
@@ -2865,6 +2942,7 @@ export {
   Tabs,
   SyncScrollProvider,
   SingleCode,
+  RunnableSnippet,
   ResponseBlock,
   ParameterList,
   PackageInstall,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpkg-ts/ui",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "UI primitives and components for OpenPkg documentation",
   "homepage": "https://github.com/ryanwaits/openpkg-ts#readme",
   "repository": {