@nyuccl/smile 0.2.0-beta.0

package/dist/runtime/components/dev/sidebar/StepExplorerPanel.vue

@@ -0,0 +1,318 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import StepNode from "./StepNode.vue";
+import StepDataViewer from "./StepDataViewer.vue";
+const api = useViewAPI();
+const stateMachine = computed(() => api.steps.visualize());
+const _pathToString = (pathArray) => {
+  return Array.isArray(pathArray) ? pathArray.join("/") : "";
+};
+const isNodeSelected = (nodePath) => {
+  if (!api.path) return false;
+  const currentPathStr = api.pathString;
+  return nodePath === currentPathStr;
+};
+const formatObjectWithIndent = (obj, indent = 0, seen = /* @__PURE__ */ new WeakSet()) => {
+  if (obj === null || obj === void 0) return "null";
+  if (typeof obj === "object" && seen.has(obj)) {
+    return "[Circular]";
+  }
+  const spaces = " ".repeat(indent * 2);
+  if (Array.isArray(obj)) {
+    if (obj.length === 0) return "[]";
+    seen.add(obj);
+    const items = obj.map((item) => formatObjectWithIndent(item, indent + 1, seen)).join(",\n" + spaces + "  ");
+    return `[
+${spaces}  ${items}
+${spaces}]`;
+  }
+  if (typeof obj === "object") {
+    const entries = Object.entries(obj);
+    if (entries.length === 0) return "{}";
+    seen.add(obj);
+    const items = entries.map(([key, value]) => {
+      const formattedValue = formatObjectWithIndent(value, indent + 1, seen);
+      return `${key}: ${formattedValue}`;
+    }).join(", ");
+    return `{ ${items} }`;
+  }
+  if (typeof obj === "string") return `"${obj}"`;
+  return String(obj);
+};
+const _formattedRootNode = computed(() => {
+  return formatObjectWithIndent(stateMachine.value);
+});
+const formatData = (data) => {
+  if (data === null || data === void 0) return "";
+  try {
+    if (typeof data === "object" && data !== null) {
+      const keys = Object.keys(data);
+      if (keys.length > 0) {
+        const previewKeys = keys.slice(0, 3);
+        const preview = previewKeys.map((k) => {
+          const val = data[k];
+          const valStr = typeof val === "object" ? "{...}" : typeof val === "string" ? `"${val.substring(0, 15)}${val.length > 15 ? "..." : ""}"` : String(val);
+          return `${k}: ${valStr}`;
+        }).join(", ");
+        return `{${preview}${keys.length > 3 ? ", ..." : ""}}`;
+      }
+      return "{}";
+    } else if (Array.isArray(data)) {
+      return `[${data.length > 0 ? "..." + data.length + " items..." : ""}]`;
+    } else {
+      return `(${String(data)})`;
+    }
+  } catch {
+    return "(data)";
+  }
+};
+const handleNodeClick = (path) => {
+  console.log("Node clicked with path:", path);
+  if (api.steps) {
+    api.goToStep(path);
+  } else {
+    console.warn("Stepper not available for path reset");
+  }
+};
+const _handleReload = () => {
+  window.location.reload();
+};
+const treeContainer = ref(null);
+const scrollToSelectedNode = () => {
+  if (!api.path) return;
+  setTimeout(() => {
+    if (!treeContainer.value) return;
+    const selectedNode = treeContainer.value.querySelector(".node-selected");
+    if (!selectedNode) return;
+    try {
+      const container = treeContainer.value;
+      const containerRect = container.getBoundingClientRect();
+      const nodeRect = selectedNode.getBoundingClientRect();
+      const relativeTop = nodeRect.top - containerRect.top;
+      const _relativeBottom = nodeRect.bottom - containerRect.top;
+      const targetPosition = relativeTop - containerRect.height / 2 + nodeRect.height / 2;
+      container.scrollTop += targetPosition;
+    } catch (e) {
+      console.error("Error scrolling to selected node:", e);
+    }
+  }, 100);
+};
+watch(
+  () => api.path,
+  (newPath) => {
+    if (newPath) {
+      scrollToSelectedNode();
+    }
+  }
+);
+</script>
+
+<template>
+  <!-- Main step explorer container -->
+  <div
+    v-if="api.steps"
+    class="tree-viewer-container"
+  >
+    <!-- Navigation controls section -->
+    <div :class="{ disabled: api.nSteps === 0 }">
+      <div class="path-display-container">
+        <!-- Current path display -->
+        <div class="path-info">
+          <div class="path-display">
+            {{ api.pathString }}
+          </div>
+        </div>
+
+        <!-- Navigation buttons -->
+        <TooltipProvider>
+          <ButtonGroup
+            variant="outline"
+            size="menu"
+          >
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ButtonGroupItem
+                  :disabled="!api.hasSteps()"
+                  @click="api.goPrevStep()"
+                >
+                  <i-lucide-chevron-left />
+                </ButtonGroupItem>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                Previous Step
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ButtonGroupItem
+                  :disabled="!api.hasSteps()"
+                  @click="api.goNextStep()"
+                >
+                  <i-lucide-chevron-right />
+                </ButtonGroupItem>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                Next Step
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ButtonGroupItem
+                  :disabled="!api.hasSteps()"
+                  @click="api.goFirstStep()"
+                >
+                  <i-famicons-home />
+                </ButtonGroupItem>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                First Step
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <ButtonGroupItem
+                  :disabled="!api.hasSteps()"
+                  @click="api.clear()"
+                >
+                  <i-mdi-trash />
+                </ButtonGroupItem>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                Clear Steps
+              </TooltipContent>
+            </Tooltip>
+          </ButtonGroup>
+        </TooltipProvider>
+      </div>
+    </div>
+
+    <!-- Tree structure display -->
+    <div
+      ref="treeContainer"
+      class="tree-container"
+    >
+      <div v-if="api.nSteps > 0">
+        <!-- Step index display -->
+        <div class="index-display">
+          <Tooltip>
+            <TooltipTrigger>{{ api.stepIndex }}/{{ api.nSteps }}</TooltipTrigger>
+            <TooltipContent side="bottom">
+              Step index
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger class="ml-1 text-teal-500">
+              ({{ api.blockIndex }}/{{ api.blockLength }})
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              Index within block
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        <!-- Tree structure -->
+        <ul class="tree-root">
+          <li
+            v-if="stateMachine"
+            class="tree-node root-node"
+          >
+            <ul
+              v-if="stateMachine.rows && stateMachine.rows.length > 0"
+              class="children"
+            >
+              <StepNode
+                v-for="(state, index) in stateMachine.rows"
+                :key="index"
+                :state="state"
+                :index="index"
+                :total="stateMachine.rows.length"
+                :is-node-selected="isNodeSelected"
+                :format-data="formatData"
+                :depth="1"
+                :max-depth="5"
+                :vertical-lines="[]"
+                @node-click="handleNodeClick"
+              />
+            </ul>
+          </li>
+        </ul>
+      </div>
+      <!-- Empty state when no steps defined -->
+      <div
+        v-else
+        class="tree-viewer-container-empty disabled"
+      >
+        No steps defined
+      </div>
+    </div>
+
+    <!-- Global persisted variables section -->
+    <div
+      class="data-container-global"
+      :class="{ disabled: Object.keys(api.persist).length === 0 }"
+    >
+      <div class="section-title">
+        <span>Persisted Vars <span class="data-label">(.persist)</span></span>
+        <Button
+          variant="outline"
+          size="menu"
+          class="has-tooltip-arrow has-tooltip-bottom"
+          data-tooltip="Delete Global Variables"
+          @click="api.clearPersist()"
+        >
+          <i-fa6-solid-trash />
+        </Button>
+      </div>
+      <div class="global-data-display">
+        <StepDataViewer
+          v-if="Object.keys(api.persist).length !== 0"
+          :data="api.persist"
+        />
+        <div
+          v-else
+          class="italic text-xs"
+        >
+          No variables persisted
+        </div>
+      </div>
+    </div>
+
+    <!-- Step data section -->
+    <div
+      class="data-container"
+      :class="{ disabled: api.nSteps === 0 }"
+    >
+      <div class="section-title">
+        <span>Step Data <span class="data-label">(.stepData)</span></span>
+      </div>
+      <div class="data-display">
+        <!--
+        <button
+          @click="api.clearCurrentStepData()"
+          class="button is-small nav-button-small has-tooltip-arrow has-tooltip-bottom"
+          data-tooltip="Delete Nodes"
+        >
+          <span><i-fa6-solid-trash" /></span>
+        </button>
+        -->
+        <StepDataViewer
+          v-if="api.nSteps !== 0"
+          :data="api.stepData"
+        />
+        <div
+          v-else
+          class="italic text-xs"
+        >
+          Data defined on this step
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tree-viewer-container{background-color:var(--background);border-top:1px solid var(--border);display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.tree-viewer-container-empty{color:var(--muted-foreground);flex:1;font-family:monospace;font-size:.75rem;font-style:italic;font-weight:200;height:100%;padding-left:10px;padding-right:10px;padding-top:5px;text-align:left}.path-display-container{align-items:center;background-color:var(--background);display:flex;flex-shrink:0;height:32px;justify-content:space-between;padding:0 5px}.path-info{align-items:baseline;color:#389e95;display:flex;font-family:Arial,Helvetica,sans-serif;font-size:.9rem;font-weight:800;line-height:1}.path-display{color:#246761;font-family:monospace;font-size:clamp(.5rem,.8rem,.8rem);font-weight:500;line-height:1;margin-left:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-buttons{align-items:center;display:flex;justify-content:space-between}.nav-button{border-left:1px solid #e4e4e4;font-size:.6rem}.nav-button-small{border-left:1px solid #e4e4e4;font-size:.5rem}.smaller{padding-bottom:11px;padding-top:10px}.topbar{background-color:#f8f8f8;padding-left:10px}.topbar-border{border-top:1px solid #e4e4e4;padding-top:4px}.index-display{color:#e49310;font-weight:500;line-height:1;padding-right:4px;padding-top:3px;position:absolute;right:0;text-align:right;top:4px;z-index:50}.content-display,.index-display{font-family:monospace;font-size:.7rem}.content-display{color:#6a6a6a;font-weight:800;line-height:1.4;white-space:pre-wrap}.state-tree-viewer{font-family:monospace;padding:1rem}.tree-container{flex:0 1 auto;font-family:monospace;max-height:300px;min-height:50px;overflow:auto;position:relative;scroll-behavior:smooth}.data-container-global,.tree-container{background-color:var(--background);border-top:1px solid var(--border)}.data-container-global{min-height:120px}.data-container,.data-container-global{display:flex;flex:0 0 auto;flex-direction:column;overflow:visible;text-align:left}.data-container{background-color:var(--background);border-bottom:1px solid var(--border);border-top:1px solid var(--border)}.data-container-global.disabled,.data-container.disabled,.disabled{opacity:.5;pointer-events:none}.tree-root{font-family:monospace;list-style-type:none;margin:0;padding-left:0}.tree-node{font-family:monospace;font-size:.75rem;margin:3px 0;position:relative}.tree-root>li.tree-node{padding-left:0}.global-data-display{font-weight:200}.data-display,.global-data-display{color:var(--muted-foreground);flex:1;font-family:monospace;font-size:.8rem;overflow:auto;padding:10px}.data-display{font-weight:500;min-height:180px}.data-label{color:#10a8a2;font-family:monospace;font-size:.7rem;font-weight:500;padding-right:6px}.section-title{align-items:center;background-color:var(--muted);border-bottom:1px solid var(--border);border-top:1px solid var(--border);color:var(--muted-foreground);display:flex;font-family:monospace;font-size:.75rem;justify-content:space-between;margin:0;padding:.375rem .5rem;text-align:left}
+</style>

package/dist/runtime/components/dev/sidebar/StepExplorerPanel.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/sidebar/StepNode.d.vue.ts

@@ -0,0 +1,84 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Props for StepNode component
+ */
+export type StepNodeProps = {
+    /**
+     * - The state object for this node
+     */
+    state: object;
+    /**
+     * - The index of this node among siblings
+     */
+    index: number;
+    /**
+     * - The total number of siblings
+     */
+    total: number;
+    /**
+     * - Function to check if node is selected
+     */
+    isNodeSelected: Function;
+    /**
+     * - Function to format node data
+     */
+    formatData: Function;
+    /**
+     * - The current depth in the tree
+     */
+    depth: number;
+    /**
+     * - The maximum depth to render
+     */
+    maxDepth: number;
+    /**
+     * - Array indicating where to draw vertical lines
+     */
+    verticalLines: any[];
+};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    state: ObjectConstructor;
+    index: NumberConstructor;
+    total: NumberConstructor;
+    isNodeSelected: FunctionConstructor;
+    formatData: FunctionConstructor;
+    depth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxDepth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    verticalLines: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "node-click": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    state: ObjectConstructor;
+    index: NumberConstructor;
+    total: NumberConstructor;
+    isNodeSelected: FunctionConstructor;
+    formatData: FunctionConstructor;
+    depth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxDepth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    verticalLines: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    "onNode-click"?: ((...args: any[]) => any) | undefined;
+}>, {
+    depth: number;
+    maxDepth: number;
+    verticalLines: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/sidebar/StepNode.vue

@@ -0,0 +1,95 @@
+<script setup>
+const props = defineProps({
+  state: Object,
+  index: Number,
+  total: Number,
+  isNodeSelected: Function,
+  formatData: Function,
+  depth: {
+    type: Number,
+    default: 1
+  },
+  maxDepth: {
+    type: Number,
+    default: 5
+  },
+  verticalLines: {
+    type: Array,
+    default: () => []
+  }
+});
+const emit = defineEmits(["node-click"]);
+const handleClick = () => {
+  emit("node-click", props.state.path);
+};
+const getBranchType = (index, total, depth) => {
+  if (index === 0 && depth === 1) {
+    return "\u250C\u2500 ";
+  } else if (index === total - 1) {
+    return "\u2514\u2500 ";
+  } else {
+    return "\u251C\u2500 ";
+  }
+};
+const getVerticalPrefix = (verticalLines) => {
+  if (!verticalLines || !verticalLines.length) return "";
+  return verticalLines.map((hasLine) => hasLine ? "\u2502 " : "  ").join("");
+};
+const getChildVerticalLines = (verticalLines, index, total) => {
+  const newLines = [...verticalLines];
+  newLines.push(index < total - 1);
+  return newLines;
+};
+</script>
+
+<template>
+  <!-- Tree node item -->
+  <li class="tree-node">
+    <div
+      class="tree-line"
+      :class="{
+        'node-selected': isNodeSelected(state.path),
+      }"
+      @click="handleClick"
+    >
+      <span class="vertical-lines">{{ getVerticalPrefix(verticalLines) }}</span>
+      <span class="tree-branch">{{ getBranchType(index, total, depth) }}</span>
+      <span
+        class="node-path"
+        :class="{ 'leaf-state': !state.isLeaf }"
+      >{{ state.path }} <i-fa6-solid-house-flag
+        v-if="state.isFirstLeaf"
+        class="home-icon inline"
+      />
+        <i-fa6-solid-leaf
+          v-else-if="state.isLeaf"
+          class="text-green-400 dark:text-green-500 inline"
+        />
+      </span>
+    </div>
+
+    <!-- Recursive tree nodes, but limit depth -->
+    <ul
+      v-if="state.rows && state.rows.length > 0 && depth < maxDepth"
+      class="children"
+    >
+      <StepNode
+        v-for="(childState, childIndex) in state.rows"
+        :key="childIndex"
+        :state="childState"
+        :index="childIndex"
+        :total="state.rows.length"
+        :is-node-selected="isNodeSelected"
+        :format-data="formatData"
+        :depth="depth + 1"
+        :max-depth="maxDepth"
+        :vertical-lines="getChildVerticalLines(verticalLines, index, total)"
+        @node-click="$emit('node-click', $event)"
+      />
+    </ul>
+  </li>
+</template>
+
+<style scoped>
+.tree-node{list-style:none;margin:0;padding:0}.tree-line{align-items:center;cursor:pointer;display:flex;margin-left:10px;margin-right:10px;padding:2px 0;white-space:pre}.tree-line:hover{background-color:rgba(0,0,0,.03)}.node-selected,.tree-line:hover{border-radius:10px;margin-right:70px}.node-selected{background-color:#92f9e0;color:#000}.node-selected:hover{background-color:rgba(146,249,224,.5)}.tree-branch,.vertical-lines{font-family:monospace}.node-path{font-weight:400;margin-left:4px}.node-data{color:#666;font-family:monospace;margin-left:8px}.children{list-style:none;margin:0;padding:0}.end-state{color:#f10e0e;opacity:.4}.leaf-state{opacity:.5}.leaf-icon{color:#04a004;opacity:.35}.dark.leaf-icon{color:#c7fbb7}.home-icon{color:#0eb6e0;opacity:.65}
+</style>

package/dist/runtime/components/dev/sidebar/StepNode.vue.d.ts

@@ -0,0 +1,84 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Props for StepNode component
+ */
+export type StepNodeProps = {
+    /**
+     * - The state object for this node
+     */
+    state: object;
+    /**
+     * - The index of this node among siblings
+     */
+    index: number;
+    /**
+     * - The total number of siblings
+     */
+    total: number;
+    /**
+     * - Function to check if node is selected
+     */
+    isNodeSelected: Function;
+    /**
+     * - Function to format node data
+     */
+    formatData: Function;
+    /**
+     * - The current depth in the tree
+     */
+    depth: number;
+    /**
+     * - The maximum depth to render
+     */
+    maxDepth: number;
+    /**
+     * - Array indicating where to draw vertical lines
+     */
+    verticalLines: any[];
+};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    state: ObjectConstructor;
+    index: NumberConstructor;
+    total: NumberConstructor;
+    isNodeSelected: FunctionConstructor;
+    formatData: FunctionConstructor;
+    depth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxDepth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    verticalLines: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "node-click": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    state: ObjectConstructor;
+    index: NumberConstructor;
+    total: NumberConstructor;
+    isNodeSelected: FunctionConstructor;
+    formatData: FunctionConstructor;
+    depth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxDepth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    verticalLines: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    "onNode-click"?: ((...args: any[]) => any) | undefined;
+}>, {
+    depth: number;
+    maxDepth: number;
+    verticalLines: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/sidebar/StudyInfoPanel.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/sidebar/StudyInfoPanel.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { computed } from "vue";
+const api = useAPI();
+const studyinfo = computed(() => {
+  return `<b>Study:</b> ${api.store.config.codeName}<br /><b>Version:</b> ${api.store.config.github.lastCommitHash}${import.meta.dev ? "-" + api.store.config.mode : ""}<br />${api.store.getShortId != "N/A" ? `<b>User ID:</b> ${api.store.getShortId}` : ""}`;
+});
+</script>
+
+<template>
+  <!-- Study info panel -->
+  <div class="w-full bg-muted border-b border-border">
+    <p
+      class="text-xs font-mono py-2 px-3 border-t border-border"
+      v-html="studyinfo"
+    />
+  </div>
+</template>

package/dist/runtime/components/dev/sidebar/StudyInfoPanel.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;