doe-sdk 0.1.0

package/templates/extension/src/components/StepContainer.tsx

@@ -0,0 +1,217 @@
+/**
+ * StepContainer - Wrapper for onboarding step content
+ *
+ * Provides consistent layout, navigation, and code toggle functionality.
+ */
+import React, { useState, useRef, type ReactNode } from "react";
+import {
+  useInteractivePointerDown,
+  usePreventCanvasZoom,
+} from "../hooks/usePointerHandlers";
+import {
+  spacing,
+  colors,
+  typography,
+  buttonStyles,
+  cardStyles,
+  codeStyles,
+  flexBetween,
+  animationStyles,
+} from "../styles";
+
+export interface StepContainerProps {
+  /** Step title */
+  title: string;
+  /** Step description */
+  description: string;
+  /** Step icon (emoji) */
+  icon: string;
+  /** Current step number (1-based for display) */
+  stepNumber: number;
+  /** Total number of steps */
+  totalSteps: number;
+  /** Interactive demo content */
+  children: ReactNode;
+  /** Code example to show */
+  codeExample?: string;
+  /** Result/output to display */
+  result?: ReactNode;
+  /** Navigate to previous step */
+  onPrev: () => void;
+  /** Navigate to next step (or complete) */
+  onNext: () => void;
+  /** Whether this is the last step */
+  isLastStep?: boolean;
+}
+
+export function StepContainer({
+  title,
+  description,
+  icon,
+  stepNumber,
+  totalSteps,
+  children,
+  codeExample,
+  result,
+  onPrev,
+  onNext,
+  isLastStep = false,
+}: StepContainerProps): React.ReactElement {
+  const [showCode, setShowCode] = useState(false);
+  const handlePointerDown = useInteractivePointerDown();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  usePreventCanvasZoom(scrollRef);
+
+  return (
+    <div
+      ref={scrollRef}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        overflow: "auto",
+        animation: "slideInRight 0.3s ease-out",
+      }}
+    >
+      <style>{animationStyles}</style>
+
+      {/* Header */}
+      <div style={{ marginBottom: spacing.lg }}>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: spacing.sm,
+            marginBottom: spacing.xs,
+          }}
+        >
+          <span style={{ fontSize: typography.sizes.xl }}>{icon}</span>
+          <h2
+            style={{
+              fontSize: typography.sizes.xl,
+              fontWeight: typography.weights.semibold,
+              color: colors.text,
+              margin: 0,
+            }}
+          >
+            {title}
+          </h2>
+        </div>
+        <p
+          style={{
+            fontSize: typography.sizes.base,
+            color: colors.textSecondary,
+            margin: 0,
+          }}
+        >
+          {description}
+        </p>
+      </div>
+
+      {/* Demo Area */}
+      <div style={{ ...cardStyles.base, marginBottom: spacing.md, flex: 1 }}>
+        {children}
+
+        {/* Result Display */}
+        {result && (
+          <div
+            style={{
+              marginTop: spacing.md,
+              padding: spacing.sm,
+              background: colors.backgroundHover,
+              borderRadius: 6,
+              fontSize: typography.sizes.sm,
+              fontFamily: "monospace",
+              color: colors.textSecondary,
+              wordBreak: "break-word",
+            }}
+          >
+            {result}
+          </div>
+        )}
+      </div>
+
+      {/* Code Toggle */}
+      {codeExample && (
+        <div style={{ marginBottom: spacing.md }}>
+          <button
+            onClick={() => setShowCode(!showCode)}
+            onPointerDown={handlePointerDown}
+            style={{
+              ...buttonStyles.link,
+              display: "flex",
+              alignItems: "center",
+              gap: spacing.xs,
+              padding: 0,
+              marginBottom: spacing.sm,
+            }}
+          >
+            <span
+              style={{
+                transform: showCode ? "rotate(90deg)" : "rotate(0deg)",
+                transition: "transform 0.15s ease",
+                display: "inline-block",
+              }}
+            >
+              ▶
+            </span>
+            {showCode ? "Hide Code" : "Show Code"}
+          </button>
+
+          {showCode && (
+            <div
+              style={{
+                ...codeStyles.container,
+                animation: "slideInUp 0.2s ease-out",
+              }}
+            >
+              <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>
+                <code style={{ color: codeStyles.plain.color }}>
+                  {codeExample}
+                </code>
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Navigation */}
+      <div
+        style={{
+          ...flexBetween,
+          paddingTop: spacing.md,
+          borderTop: `1px solid ${colors.border}`,
+        }}
+      >
+        <button
+          onClick={onPrev}
+          onPointerDown={handlePointerDown}
+          style={{
+            ...buttonStyles.secondary,
+            opacity: stepNumber === 1 ? 0.5 : 1,
+          }}
+          disabled={stepNumber === 1}
+        >
+          ← Back
+        </button>
+
+        <span
+          style={{
+            fontSize: typography.sizes.sm,
+            color: colors.textMuted,
+          }}
+        >
+          {stepNumber} / {totalSteps}
+        </span>
+
+        <button
+          onClick={onNext}
+          onPointerDown={handlePointerDown}
+          style={buttonStyles.primary}
+        >
+          {isLastStep ? "Complete" : "Next →"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/extension/src/components/playground/CanvasTab.tsx

@@ -0,0 +1,24 @@
+/**
+ * CanvasTab - Playground tab for Canvas API exploration
+ *
+ * Uses shared CanvasControls component for DRY code.
+ */
+import React, { useState } from "react";
+import type { DOEExtensionAPI } from "doe-sdk/runtime";
+import { CanvasControls } from "../shared";
+import { ResultDisplay } from "./ResultDisplay";
+
+export interface CanvasTabProps {
+  api: DOEExtensionAPI;
+}
+
+export function CanvasTab({ api }: CanvasTabProps): React.ReactElement {
+  const [result, setResult] = useState<string>("");
+
+  return (
+    <div>
+      <CanvasControls api={api} onResult={setResult} />
+      <ResultDisplay result={result} />
+    </div>
+  );
+}

package/templates/extension/src/components/playground/ConfigTab.tsx

@@ -0,0 +1,24 @@
+/**
+ * ConfigTab - Playground tab for Config API exploration
+ *
+ * Uses shared ConfigControls component for DRY code.
+ */
+import React, { useState } from "react";
+import type { DOEExtensionAPI } from "doe-sdk/runtime";
+import { ConfigControls } from "../shared";
+import { ResultDisplay } from "./ResultDisplay";
+
+export interface ConfigTabProps {
+  api: DOEExtensionAPI;
+}
+
+export function ConfigTab({ api }: ConfigTabProps): React.ReactElement {
+  const [result, setResult] = useState<string>("");
+
+  return (
+    <div>
+      <ConfigControls api={api} onResult={setResult} />
+      <ResultDisplay result={result} />
+    </div>
+  );
+}

package/templates/extension/src/components/playground/EventsTab.tsx

@@ -0,0 +1,24 @@
+/**
+ * EventsTab - Playground tab for Events API exploration
+ *
+ * Uses shared EventsControls component for DRY code.
+ */
+import React, { useState } from "react";
+import type { DOEExtensionAPI } from "doe-sdk/runtime";
+import { EventsControls } from "../shared";
+import { ResultDisplay } from "./ResultDisplay";
+
+export interface EventsTabProps {
+  api: DOEExtensionAPI;
+}
+
+export function EventsTab({ api }: EventsTabProps): React.ReactElement {
+  const [result, setResult] = useState<string>("");
+
+  return (
+    <div>
+      <EventsControls api={api} onResult={setResult} />
+      <ResultDisplay result={result} />
+    </div>
+  );
+}

package/templates/extension/src/components/playground/InfoTab.tsx

@@ -0,0 +1,89 @@
+/**
+ * InfoTab - Playground tab for Workspace and Theme info
+ *
+ * Uses shared InfoControls component for DRY code,
+ * plus extension-specific info display.
+ */
+import React, { useState } from "react";
+import type { DOEExtensionAPI } from "doe-sdk/runtime";
+import { InfoControls } from "../shared";
+import { ResultDisplay } from "./ResultDisplay";
+import { spacing, colors, typography, cardStyles } from "../../styles";
+
+export interface InfoTabProps {
+  api: DOEExtensionAPI;
+}
+
+export function InfoTab({ api }: InfoTabProps): React.ReactElement {
+  const [result, setResult] = useState<string>("");
+  const extensionInfo = api.extension;
+
+  return (
+    <div>
+      {/* Extension info (specific to playground) */}
+      <div style={{ marginBottom: spacing.md }}>
+        <div
+          style={{
+            fontSize: typography.sizes.sm,
+            fontWeight: typography.weights.medium,
+            color: colors.textSecondary,
+            marginBottom: spacing.xs,
+          }}
+        >
+          Extension
+        </div>
+        <div
+          style={{
+            ...cardStyles.base,
+            background: colors.backgroundHover,
+          }}
+        >
+          <div style={{ marginBottom: spacing.xs }}>
+            <span style={{ fontSize: typography.sizes.sm, color: colors.textSecondary }}>ID: </span>
+            <span
+              style={{
+                fontSize: typography.sizes.sm,
+                fontWeight: typography.weights.medium,
+                color: colors.text,
+                fontFamily: "monospace",
+              }}
+            >
+              {extensionInfo.id}
+            </span>
+          </div>
+          <div style={{ marginBottom: spacing.xs }}>
+            <span style={{ fontSize: typography.sizes.sm, color: colors.textSecondary }}>
+              Version:{" "}
+            </span>
+            <span
+              style={{
+                fontSize: typography.sizes.sm,
+                fontWeight: typography.weights.medium,
+                color: colors.text,
+              }}
+            >
+              {extensionInfo.version}
+            </span>
+          </div>
+          <div>
+            <span style={{ fontSize: typography.sizes.sm, color: colors.textSecondary }}>
+              Permissions:{" "}
+            </span>
+            <span
+              style={{
+                fontSize: typography.sizes.sm,
+                fontWeight: typography.weights.medium,
+                color: colors.text,
+              }}
+            >
+              {extensionInfo.permissions?.length || 0} granted
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <InfoControls api={api} onResult={setResult} />
+      <ResultDisplay result={result} />
+    </div>
+  );
+}

package/templates/extension/src/components/playground/NetworkTab.tsx

@@ -0,0 +1,24 @@
+/**
+ * NetworkTab - Playground tab for Network API exploration
+ *
+ * Uses shared NetworkControls component for DRY code.
+ */
+import React, { useState } from "react";
+import type { DOEExtensionAPI } from "doe-sdk/runtime";
+import { NetworkControls } from "../shared";
+import { ResultDisplay } from "./ResultDisplay";
+
+export interface NetworkTabProps {
+  api: DOEExtensionAPI;
+}
+
+export function NetworkTab({ api }: NetworkTabProps): React.ReactElement {
+  const [result, setResult] = useState<string>("");
+
+  return (
+    <div>
+      <NetworkControls api={api} onResult={setResult} />
+      <ResultDisplay result={result} />
+    </div>
+  );
+}

package/templates/extension/src/components/playground/PlaygroundContainer.tsx

@@ -0,0 +1,184 @@
+/**
+ * PlaygroundContainer - Tabbed playground for exploring SDK APIs
+ *
+ * Post-onboarding environment for free exploration of all APIs.
+ */
+import React, { useState, useRef } from "react";
+import type { DOEExtensionAPI } from "doe-sdk/runtime";
+import { useInteractivePointerDown, usePreventCanvasZoom } from "../../hooks/usePointerHandlers";
+import { spacing, colors, typography, animationStyles } from "../../styles";
+import { CanvasTab } from "./CanvasTab";
+import { StorageTab } from "./StorageTab";
+import { ConfigTab } from "./ConfigTab";
+import { UITab } from "./UITab";
+import { EventsTab } from "./EventsTab";
+import { NetworkTab } from "./NetworkTab";
+import { InfoTab } from "./InfoTab";
+
+export interface PlaygroundContainerProps {
+  api: DOEExtensionAPI;
+  onRestartOnboarding: () => void;
+}
+
+type TabId = "canvas" | "storage" | "config" | "ui" | "events" | "network" | "info";
+
+interface Tab {
+  id: TabId;
+  label: string;
+  icon: string;
+}
+
+const TABS: Tab[] = [
+  { id: "canvas", label: "Canvas", icon: "🎨" },
+  { id: "storage", label: "Storage", icon: "💾" },
+  { id: "config", label: "Config", icon: "⚙️" },
+  { id: "ui", label: "UI", icon: "🔔" },
+  { id: "events", label: "Events", icon: "📡" },
+  { id: "network", label: "Network", icon: "🌐" },
+  { id: "info", label: "Info", icon: "ℹ️" },
+];
+
+export function PlaygroundContainer({
+  api,
+  onRestartOnboarding,
+}: PlaygroundContainerProps): React.ReactElement {
+  const [activeTab, setActiveTab] = useState<TabId>("canvas");
+  const handlePointerDown = useInteractivePointerDown();
+  const contentRef = useRef<HTMLDivElement>(null);
+  usePreventCanvasZoom(contentRef);
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case "canvas":
+        return <CanvasTab api={api} />;
+      case "storage":
+        return <StorageTab api={api} />;
+      case "config":
+        return <ConfigTab api={api} />;
+      case "ui":
+        return <UITab api={api} />;
+      case "events":
+        return <EventsTab api={api} />;
+      case "network":
+        return <NetworkTab api={api} />;
+      case "info":
+        return <InfoTab api={api} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        animation: "fadeIn 0.3s ease-out",
+      }}
+    >
+      <style>{animationStyles}</style>
+
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: spacing.md,
+        }}
+      >
+        <div>
+          <h1
+            style={{
+              fontSize: typography.sizes.lg,
+              fontWeight: typography.weights.semibold,
+              color: colors.text,
+              margin: 0,
+            }}
+          >
+            SDK Playground
+          </h1>
+          <p
+            style={{
+              fontSize: typography.sizes.xs,
+              color: colors.textMuted,
+              margin: 0,
+            }}
+          >
+            Explore APIs freely
+          </p>
+        </div>
+        <button
+          onClick={onRestartOnboarding}
+          onPointerDown={handlePointerDown}
+          style={{
+            padding: `${spacing.xs}px ${spacing.sm}px`,
+            background: "transparent",
+            border: `1px solid ${colors.border}`,
+            borderRadius: 6,
+            fontSize: typography.sizes.xs,
+            color: colors.textSecondary,
+            cursor: "pointer",
+            transition: "all 0.15s ease",
+          }}
+        >
+          ↻ Restart Tour
+        </button>
+      </div>
+
+      {/* Tab bar */}
+      <div
+        style={{
+          display: "flex",
+          gap: spacing.xs,
+          marginBottom: spacing.md,
+          overflowX: "auto",
+          paddingBottom: spacing.xs,
+        }}
+        onPointerDown={handlePointerDown}
+      >
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            onPointerDown={handlePointerDown}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: spacing.xs,
+              padding: `${spacing.sm}px ${spacing.md}px`,
+              background: activeTab === tab.id ? colors.primary : "transparent",
+              color: activeTab === tab.id ? "white" : colors.textSecondary,
+              border: activeTab === tab.id ? "none" : `1px solid ${colors.border}`,
+              borderRadius: 8,
+              fontSize: typography.sizes.sm,
+              fontWeight: typography.weights.medium,
+              cursor: "pointer",
+              transition: "all 0.15s ease",
+              whiteSpace: "nowrap",
+              flexShrink: 0,
+            }}
+          >
+            <span>{tab.icon}</span>
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div
+        ref={contentRef}
+        style={{
+          flex: 1,
+          overflow: "auto",
+          background: colors.backgroundSecondary,
+          borderRadius: 12,
+          padding: spacing.md,
+        }}
+      >
+        {renderTabContent()}
+      </div>
+    </div>
+  );
+}

package/templates/extension/src/components/playground/ResultDisplay.tsx

@@ -0,0 +1,30 @@
+/**
+ * ResultDisplay - Shared result display for playground tabs
+ */
+import React from "react";
+import { spacing, colors, typography } from "../../styles";
+
+export interface ResultDisplayProps {
+  result: string;
+}
+
+export function ResultDisplay({ result }: ResultDisplayProps): React.ReactElement | null {
+  if (!result) return null;
+
+  return (
+    <div
+      style={{
+        marginTop: spacing.md,
+        padding: spacing.sm,
+        background: colors.backgroundHover,
+        borderRadius: 6,
+        fontSize: typography.sizes.sm,
+        color: colors.textSecondary,
+        fontFamily: "monospace",
+        whiteSpace: "pre-wrap",
+      }}
+    >
+      {result}
+    </div>
+  );
+}

package/templates/extension/src/components/playground/StorageTab.tsx

@@ -0,0 +1,24 @@
+/**
+ * StorageTab - Playground tab for Storage API exploration
+ *
+ * Uses shared StorageControls component for DRY code.
+ */
+import React, { useState } from "react";
+import type { DOEExtensionAPI } from "doe-sdk/runtime";
+import { StorageControls } from "../shared";
+import { ResultDisplay } from "./ResultDisplay";
+
+export interface StorageTabProps {
+  api: DOEExtensionAPI;
+}
+
+export function StorageTab({ api }: StorageTabProps): React.ReactElement {
+  const [result, setResult] = useState<string>("");
+
+  return (
+    <div>
+      <StorageControls api={api} onResult={setResult} />
+      <ResultDisplay result={result} />
+    </div>
+  );
+}

package/templates/extension/src/components/playground/UITab.tsx

@@ -0,0 +1,24 @@
+/**
+ * UITab - Playground tab for UI API exploration
+ *
+ * Uses shared UIControls component for DRY code.
+ */
+import React, { useState } from "react";
+import type { DOEExtensionAPI } from "doe-sdk/runtime";
+import { UIControls } from "../shared";
+import { ResultDisplay } from "./ResultDisplay";
+
+export interface UITabProps {
+  api: DOEExtensionAPI;
+}
+
+export function UITab({ api }: UITabProps): React.ReactElement {
+  const [result, setResult] = useState<string>("");
+
+  return (
+    <div>
+      <UIControls api={api} onResult={setResult} />
+      <ResultDisplay result={result} />
+    </div>
+  );
+}