@tscircuit/runframe 0.0.371 → 0.0.373

package/dist/{chunk-43JV2KDS.js → chunk-SYVWM5DF.js}

@@ -440,42 +440,36 @@ ${errorMessage.slice(0, 2e3)}
 import { SchematicViewer } from "@tscircuit/schematic-viewer";
 import { AssemblyViewer } from "@tscircuit/assembly-viewer";
 
-// lib/utils/getRandomTipForUser .ts
+// lib/utils/getRandomTipForUser.ts
 var tips = [
-  "Always initialize your project using ['tsci init'](https://github.com/tscircuit/cli) before adding components.",
-  "Use the visual editor for real-time PCB layout and placement feedback.",
-  "Leverage automatic routing for faster PCB trace connections.",
-  "Define reusable subcircuits for common electronic patterns.",
-  "Utilize board constraints to stay within manufacturing parameters.",
-  "Run 'tsci dev' to preview your boards before export.",
+  "Always initialize your project using [tsci init](https://github.com/tscircuit/cli) before adding components.",
+  "Define reusable modules with cached routes using [<subcircuit />](https://docs.tscircuit.com/elements/subcircuit)",
+  "Run `tsci dev` on the command line to preview your boards before export",
   "Use units like mm or mils consistently across your designs.",
-  "Reference the 'element' docs for correct pin and footprint placement.",
-  "Consult 'ordering-prototypes' for recommended PCB fab workflows.",
-  "Use 'net' and 'group' constructs to organize complex schematics.",
-  "Review 'manual-edits' for advanced board customization.",
-  "Serialize your circuits to JSON for interoperability and versioning.",
-  "Import components from external libraries with 'importing-modules-and-chips'.",
-  "Leverage the image generation API to render board previews.",
-  "Use 'essential-elements' to quickly scaffold new circuits.",
-  "Check 'platform-configuration' for custom toolchain commands.",
-  "Optimize layouts using the 'automatic-layout' guide.",
-  "Stick to known footprints for easier assembly and rework.",
-  "Configure chips using pin selectors for precise control.",
-  "Publish modules via the registry for team-wide access.",
-  "Explore tutorials for real-world circuit design examples.",
-  "Upload your Circuit JSON to circuitjson.com for a quick preview.",
-  "Use the <CircuitJsonPreview /> component to display all available previews for a Circuit JSON array.",
-  "Use a <group /> element to move multiple components at once in a schematic or PCB layout.",
-  "Refer to the GitHub Discussions page to request more platform features tailored to your needs.",
-  "Use the grid function from math-utils to create a grid of components for LED matrix layouts.",
-  "Use the RootCircuit platform configuration to customize registry and autorouter behavior.",
-  "Use the <constraint /> element to enforce geometric relationships in PCB designs.",
-  "Follow the recommended contribution order to understand the tscircuit ecosystem better.",
-  "Join the Discord server to discuss issues and get help directly from the community.",
-  "Reach out to enterprise support for running the tscircuit platform privately within your organization."
+  "Quickly set footprints with the [footprint prop](https://docs.tscircuit.com/footprints/footprinter-strings)",
+  "Check out the guide on [ordering prototypes](https://docs.tscircuit.com/building-electronics/ordering-prototypes)",
+  "Use [net labels](https://docs.tscircuit.com/elements/net) and [group elements](https://docs.tscircuit.com/elements/group) to organize complex schematics.",
+  "You can manually drag components on the PCB and Schematic using [manual edits](https://docs.tscircuit.com/guides/manual-edits)",
+  "Every tscircuit module can export to [Circuit JSON](https://github.com/tscircuit/circuit-json), Gerbers, Pick'n'Place CSV files, Bill of Materials CSV and more",
+  "You can import components from [JLCPCB](https://docs.tscircuit.com/guides/importing-modules-and-chips/importing-from-jlcpcb) or [KiCad](https://docs.tscircuit.com/guides/importing-modules-and-chips/importing-from-kicad)",
+  "Any module you push to the [registry](https://tscircuit.com/trending) will have [simple image urls](https://docs.tscircuit.com/web-apis/image-generation-api) you can use display images on a website",
+  "The default [Parts Engine](https://docs.tscircuit.com/guides/platform-configuration) will automatically find parts from common vendors for your BOM",
+  '[Pin selectors](https://docs.tscircuit.com/guides/using-sel-references) are similar to CSS selectors, ".R1 > .pin1" means "connect to the first pin of the component R1"',
+  "You can use the [sel](https://docs.tscircuit.com/guides/using-sel-references) object to select pins in a type-safe way",
+  "Publish modules via the [registry](https://tscircuit.com/trending) for working with a team or sharing your work",
+  "[Explore tutorials](https://docs.tscircuit.com/category/tutorials) for real-world circuit design examples.",
+  "Upload your Circuit JSON to [circuitjson.com](https://circuitjson.com) for a quick preview.",
+  "You can display Circuit JSON in 3D, PCB or Schematic mode with the [<CircuitJsonPreview />](https://docs.tscircuit.com/elements/circuitjsonpreview) React component",
+  "Use a [<group />](https://docs.tscircuit.com/elements/group) element to move multiple components at once in a schematic or PCB layout.",
+  "Refer to the [GitHub Discussions page](https://github.com/tscircuit/tscircuit/discussions) to request features",
+  "You can customize the autorouter using the [autorouter prop](https://docs.tscircuit.com/elements/board#setting-the-autorouter)",
+  "Use the [<constraint />](https://docs.tscircuit.com/footprints/constraint) element to enforce geometric relationships in PCB designs.",
+  "Join the [Discord server](https://tscircuit.com/join) to discuss issues and get help directly from the community."
 ];
 var getRandomTipForUser = () => {
   let tip = tips[Math.floor(Math.random() * tips.length)];
+  tip = tip.replace(/</g, "&lt;");
+  tip = tip.replace(/>/g, "&gt;");
   tip = tip.replace(
     /(?<!href=")(?<!\()(?<!\]\()(https?:\/\/[^\s\)\]]+)/g,
     (match, p1) => `<a class="rf-text-blue-500 rf-underline"  href="${match}" target="_blank">${match}</a>`
@@ -489,25 +483,29 @@ var getRandomTipForUser = () => {
 
 // lib/components/PreviewEmptyState.tsx
 import { LightbulbIcon, PlayIcon } from "lucide-react";
+import { useMemo } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var PreviewEmptyState = ({ onRunClicked }) => /* @__PURE__ */ jsxs5("div", { className: "rf-flex rf-flex-col rf-items-center rf-justify-center rf-h-full rf-bg-gray-50 rf-text-gray-500 rf-p-4", children: [
-  /* @__PURE__ */ jsx7(LightbulbIcon, { className: "rf-size-14 rf-mb-4" }),
-  /* @__PURE__ */ jsxs5("p", { className: "rf-text-md rf-break-words rf-max-w-xl rf-text-center", children: [
-    "Tip: ",
-    /* @__PURE__ */ jsx7("span", { dangerouslySetInnerHTML: { __html: getRandomTipForUser() } })
-  ] }),
-  onRunClicked && /* @__PURE__ */ jsxs5(
-    Button,
-    {
-      className: "rf-mt-4 rf-bg-blue-600 rf-hover:bg-blue-500",
-      onClick: onRunClicked,
-      children: [
-        "Run Code",
-        /* @__PURE__ */ jsx7(PlayIcon, { className: "rf-w-3 rf-h-3 rf-ml-2" })
-      ]
-    }
-  )
-] });
+var PreviewEmptyState = ({ onRunClicked }) => {
+  const tipHtml = useMemo(() => getRandomTipForUser(), []);
+  return /* @__PURE__ */ jsxs5("div", { className: "rf-flex rf-flex-col rf-items-center rf-justify-center rf-h-full rf-bg-gray-50 rf-text-gray-500 rf-p-4", children: [
+    /* @__PURE__ */ jsx7(LightbulbIcon, { className: "rf-size-14 rf-mb-4" }),
+    /* @__PURE__ */ jsxs5("p", { className: "rf-text-md rf-break-words rf-max-w-xl rf-text-center", children: [
+      "Tip: ",
+      /* @__PURE__ */ jsx7("span", { dangerouslySetInnerHTML: { __html: tipHtml } })
+    ] }),
+    onRunClicked && /* @__PURE__ */ jsxs5(
+      Button,
+      {
+        className: "rf-mt-4 rf-bg-blue-600 rf-hover:bg-blue-500",
+        onClick: onRunClicked,
+        children: [
+          "Run Code",
+          /* @__PURE__ */ jsx7(PlayIcon, { className: "rf-w-3 rf-h-3 rf-ml-2" })
+        ]
+      }
+    )
+  ] });
+};
 var PreviewEmptyState_default = PreviewEmptyState;
 
 // lib/components/CircuitJsonTableViewer/CircuitJsonTableViewer.tsx
@@ -1039,7 +1037,7 @@ var RenderLogViewer = ({
 };
 
 // package.json
-var version = "0.0.370";
+var version = "0.0.372";
 
 // lib/components/CircuitJsonPreview/CircuitJsonPreview.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -1563,14 +1561,14 @@ var useRunFrameStore = create()(
   )
 );
 
-// lib/components/ui/alert-dialog.tsx
+// lib/components/ui/dialog.tsx
 import * as React6 from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
-var AlertDialog = AlertDialogPrimitive.Root;
-var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
-  AlertDialogPrimitive.Overlay,
+var Dialog = DialogPrimitive.Root;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+  DialogPrimitive.Overlay,
   {
     className: cn(
       "rf-fixed rf-inset-0 rf-z-50 rf-bg-black/80 data-[state=open]:rf-animate-in data-[state=closed]:rf-animate-out data-[state=closed]:rf-fade-out-0 data-[state=open]:rf-fade-in-0",
@@ -1580,23 +1578,24 @@ var AlertDialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /*
     ref
   }
 ));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs13(AlertDialogPortal, { children: [
-  /* @__PURE__ */ jsx17(AlertDialogOverlay, {}),
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs13(DialogPortal, { children: [
+  /* @__PURE__ */ jsx17(DialogOverlay, {}),
   /* @__PURE__ */ jsx17(
-    AlertDialogPrimitive.Content,
+    DialogPrimitive.Content,
     {
       ref,
       className: cn(
         "rf-fixed rf-left-[50%] rf-top-[50%] rf-z-50 rf-grid rf-w-full rf-max-w-lg rf-translate-x-[-50%] rf-translate-y-[-50%] rf-gap-4 rf-border rf-border-zinc-200 rf-bg-white rf-p-6 rf-shadow-lg rf-duration-200 data-[state=open]:rf-animate-in data-[state=closed]:rf-animate-out data-[state=closed]:rf-fade-out-0 data-[state=open]:rf-fade-in-0 data-[state=closed]:rf-zoom-out-95 data-[state=open]:rf-zoom-in-95 data-[state=closed]:rf-slide-out-to-left-1/2 data-[state=closed]:rf-slide-out-to-top-[48%] data-[state=open]:rf-slide-in-from-left-1/2 data-[state=open]:rf-slide-in-from-top-[48%] sm:rf-rounded-lg dark:rf-border-zinc-800 dark:rf-bg-zinc-950",
         className
       ),
-      ...props
+      ...props,
+      children
     }
   )
 ] }));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogHeader = ({
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx17(
@@ -1609,8 +1608,8 @@ var AlertDialogHeader = ({
     ...props
   }
 );
-AlertDialogHeader.displayName = "AlertDialogHeader";
-var AlertDialogFooter = ({
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx17(
@@ -1623,18 +1622,18 @@ var AlertDialogFooter = ({
     ...props
   }
 );
-AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
-  AlertDialogPrimitive.Title,
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+  DialogPrimitive.Title,
   {
     ref,
     className: cn("rf-text-lg rf-font-semibold", className),
     ...props
   }
 ));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
-  AlertDialogPrimitive.Description,
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+  DialogPrimitive.Description,
   {
     ref,
     className: cn(
@@ -1644,29 +1643,7 @@ var AlertDialogDescription = React6.forwardRef(({ className, ...props }, ref) =>
     ...props
   }
 ));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
-  AlertDialogPrimitive.Action,
-  {
-    ref,
-    className: cn(buttonVariants(), className),
-    ...props
-  }
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
-  AlertDialogPrimitive.Cancel,
-  {
-    ref,
-    className: cn(
-      buttonVariants({ variant: "outline" }),
-      "rf-mt-2 sm:rf-mt-0",
-      className
-    ),
-    ...props
-  }
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // lib/components/OrderDialog/OrderDialog.tsx
 import { QueryClient, QueryClientProvider } from "react-query";
@@ -1929,13 +1906,22 @@ var OrderDialog = ({
   circuitJson,
   packageReleaseId
 }) => {
-  return /* @__PURE__ */ jsx20(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx20(AlertDialog, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsx20(AlertDialogContent, { className: "!rf-max-w-[660px] !rf-p-0", children: /* @__PURE__ */ jsx20("div", { className: "rf-relative rf-w-full", children: stage === "initial" && /* @__PURE__ */ jsx20(
-    InitialOrderScreen,
+  return /* @__PURE__ */ jsx20(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx20(
+    Dialog,
     {
-      onCancel: onClose,
-      packageReleaseId: packageReleaseId ?? ""
+      open: isOpen,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      children: /* @__PURE__ */ jsx20(DialogContent, { className: "!rf-max-w-[660px] !rf-p-0", children: /* @__PURE__ */ jsx20("div", { className: "rf-relative rf-w-full", children: stage === "initial" && /* @__PURE__ */ jsx20(
+        InitialOrderScreen,
+        {
+          onCancel: onClose,
+          packageReleaseId: packageReleaseId ?? ""
+        }
+      ) }) })
     }
-  ) }) }) }) });
+  ) });
 };
 
 // lib/components/OrderDialog/CliOrderDialog.tsx
@@ -2000,6 +1986,7 @@ export {
   Tabs,
   TabsList,
   TabsTrigger,
+  buttonVariants,
   Button,
   DropdownMenu,
   DropdownMenuTrigger,
@@ -2016,13 +2003,6 @@ export {
   debug_default,
   API_BASE,
   useRunFrameStore,
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogCancel,
   toast,
   useOrderDialogCli,
   useOrderDialog,

package/dist/preview.js

@@ -8,7 +8,7 @@ import {
   linkify,
   useOrderDialog,
   useOrderDialogCli
-} from "./chunk-43JV2KDS.js";
+} from "./chunk-SYVWM5DF.js";
 export {
   BomTable,
   CadViewer,