@openpkg-ts/ui 0.6.0 → 0.6.2

package/dist/docskit/index.d.ts

@@ -310,9 +310,9 @@ interface NestedParameterToggleProps {
 	className?: string;
 }
 /**
-* "Show/Hide Child Attributes" toggle button (Scalar/Clerk-style).
-* When collapsed: standalone rounded pill.
-* When expanded: top of a unified bordered container (rounded-t, no bottom border).
+* "Show/Hide Child Attributes" toggle button (Stripe-style).
+* When collapsed: inline-block rounded pill button.
+* When expanded: full-width top of unified bordered container.
 */
 declare function NestedParameterToggle({ expanded, onToggle, className }: NestedParameterToggleProps): ReactNode11;
 import { ReactNode as ReactNode12 } from "react";
@@ -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,
@@ -1309,7 +1310,7 @@ function APIReferenceLayout({
   rightWidth = "42%"
 }) {
   return /* @__PURE__ */ jsxs12("div", {
-    className: cn("openpkg-api-layout", "max-w-[1600px] mx-auto", "flex flex-col", "lg:grid", className),
+    className: cn("openpkg-api-layout", "max-w-[1600px] mx-auto", "flex flex-col", "lg:grid lg:items-start", className),
     style: {
       "--openpkg-left-width": leftWidth,
       "--openpkg-right-width": rightWidth
@@ -1896,7 +1897,7 @@ function NestedParameterToggle({
   return /* @__PURE__ */ jsxs20("button", {
     type: "button",
     onClick: onToggle,
-    className: cn("openpkg-nested-toggle", "flex items-center gap-2 w-full", "font-sans text-[13px] font-medium", "text-[var(--openpkg-text-secondary)]", "bg-transparent", "border border-[var(--openpkg-border-medium)]", "px-4 py-3", "cursor-pointer", "transition-all duration-150", "hover:text-[var(--openpkg-text-primary)]", expanded ? "rounded-t-lg rounded-b-none border-b-[var(--openpkg-border-subtle)]" : "rounded-lg", className),
+    className: cn("openpkg-nested-toggle", "flex items-center gap-2", "font-sans text-[13px] font-medium", "text-[var(--openpkg-text-secondary)]", "bg-transparent", "border border-[var(--openpkg-border-medium)]", "px-2 py-1.5", "cursor-pointer", "transition-[width,border-radius,border-color,color] duration-200 ease-out", "hover:text-[var(--openpkg-text-primary)]", expanded ? "w-full rounded-t-md rounded-b-none border-b-[var(--openpkg-border-subtle)]" : "w-fit rounded-md", className),
     "aria-expanded": expanded,
     children: [
       /* @__PURE__ */ jsx38("span", {
@@ -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.0",
+  "version": "0.6.2",
   "description": "UI primitives and components for OpenPkg documentation",
   "homepage": "https://github.com/ryanwaits/openpkg-ts#readme",
   "repository": {