upstart-gg · mattallty · Jun 20, 2025
diff --git a/biome.json b/biome.json
@@ -35,7 +35,9 @@
         "useSingleVarDeclarator": "off"
       },
       "a11y": {
-        "useKeyWithClickEvents": "off"
+        "useKeyWithClickEvents": "off",
+        "noLabelWithoutControl": "off",
+        "useSemanticElements": "off"
       },
       "suspicious": {
         "noArrayIndexKey": "off",

diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
   },
   "packageManager": "pnpm@10.8.0",
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "1.9.4",
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.8",
     "@vitest/ui": "2.1.9",

diff --git a/packages/components/index.html b/packages/components/index.html
@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/base/reset.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/components/navbar.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/components/button.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/components/card.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/utilities/join.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/utilities/typography.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/utilities/radius.css" />

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -115,6 +115,7 @@
     "typescript": "^5.8.3",
     "vite": "5.4.10",
     "vite-plugin-bundlesize": "0.2.0",
+    "vite-plugin-devtools-json": "0.2.0",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-inspect": "0.8.7"
   },

diff --git a/packages/components/src/editor/components/AttributesSettingsView.tsx b/packages/components/src/editor/components/AttributesSettingsView.tsx
@@ -3,9 +3,9 @@ import { sectionSchema } from "@upstart.gg/sdk/shared/bricks";
 import { getSchemaObjectDefaults } from "@upstart.gg/sdk/shared/utils/schema";
 import { useCallback, useMemo } from "react";
 import { merge } from "lodash-es";
-import { useAttributes, usePreviewMode } from "~/editor/hooks/use-editor";
+import { useAttributes, useDraft, useDraftHelpers, usePreviewMode } from "~/editor/hooks/use-editor";
 import { getNavItemsFromManifest, type SchemaFilter } from "./json-form/form-utils";
-import type { AttributesSchema } from "@upstart.gg/sdk/shared/attributes";
+import type { Attributes, AttributesSchema } from "@upstart.gg/sdk/shared/attributes";
 
 type AttributesSettingsViewProps = {
   attributesSchema: AttributesSchema;
@@ -20,6 +20,7 @@ export default function AttributesSettingsView({
 }: AttributesSettingsViewProps) {
   const previewMode = usePreviewMode();
   const attr = useAttributes();
+  const draft = useDraft();
   const filter: SchemaFilter = (prop) => {
     return (
       (typeof prop.metadata?.["ui:responsive"] === "undefined" ||
@@ -38,8 +39,10 @@ export default function AttributesSettingsView({
     return merge({}, defProps, attr ?? {});
   }, [attr, attributesSchema]);
 
-  const  Record<string, unknown>, propertyChangedPath: string) => {
-    console.log("onChange", data, propertyChangedPath);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: draft.updateAttributes is a stable function
+  const  Record<string, unknown>, propertyChanged: string) => {
+    console.log("changed attr %o", data);
+    draft.updateAttributes(data as Attributes);
   }, []);
 
   return (

diff --git a/packages/components/src/editor/components/BrickSettingsView.tsx b/packages/components/src/editor/components/BrickSettingsView.tsx
@@ -9,6 +9,7 @@ import { useDraftHelpers, useGetBrick, usePreviewMode } from "~/editor/hooks/use
 import { defaultProps } from "@upstart.gg/sdk/shared/bricks/manifests/all-manifests";
 import { getNavItemsFromManifest, type SchemaFilter } from "./json-form/form-utils";
 import { tx } from "@upstart.gg/style-system/twind";
+import { useLocalStorage } from "usehooks-ts";
 
 type BrickSettingsViewProps = {
   brick: Brick;
@@ -18,6 +19,7 @@ type BrickSettingsViewProps = {
 export default function BrickSettingsView({ brick, group }: BrickSettingsViewProps) {
   const { updateBrickProps } = useDraftHelpers();
   const manifest = useBrickManifest(brick.type);
+  const [showAdvanced, setShowAdvanced] = useLocalStorage("upstart:editor:show-advanced", false);
   const previewMode = usePreviewMode();
   const getBrickInfo = useGetBrick();
   const brickInfo = getBrickInfo(brick.id);
@@ -26,7 +28,8 @@ export default function BrickSettingsView({ brick, group }: BrickSettingsViewPro
       (typeof prop.metadata?.["ui:responsive"] === "undefined" ||
         prop.metadata?.["ui:responsive"] === true ||
         prop.metadata?.["ui:responsive"] === previewMode) &&
-      (!prop.metadata?.category || prop.metadata?.category === "settings")
+      (!prop.metadata?.category || prop.metadata?.category === "settings") &&
+      (!prop["ui:advanced"] || showAdvanced)
       /* &&
       (!group || !prop.metadata?.group || (prop.metadata?.group && key === group))*/
     );

diff --git a/packages/components/src/editor/components/ContextMenu.tsx b/packages/components/src/editor/components/ContextMenu.tsx
@@ -16,7 +16,7 @@ const ContextMenuWrapper = ({ children }: ComponentProps<"div">) => {
       const target = e.target as HTMLElement | null;
       const isBrick = target?.matches("[data-brick]");
       const isBrickChild = target?.closest("[data-brick]");
-      const brickElement = (isBrick ? target : isBrickChild ?? null) as HTMLElement | null;
+      const brickElement = (isBrick ? target : (isBrickChild ?? null)) as HTMLElement | null;
 
       if (brickElement) {
         const brickId = brickElement.getAttribute("id");

diff --git a/packages/components/src/editor/components/EditablePage.tsx b/packages/components/src/editor/components/EditablePage.tsx
@@ -106,7 +106,6 @@ export default function EditablePage({ showIntro }: EditablePageProps) {
         // updateDragOverGhostStyle(null);
 
         if (position) {
-          console.debug("New brick dropped at", position, section);
           const bricksDefaults = defaultProps[brickType];
 
           // @ts-igneore
@@ -122,6 +121,8 @@ export default function EditablePage({ showIntro }: EditablePageProps) {
             : null;
           const hoveredBrickManifest = hoveredBrick ? manifests[hoveredBrick.type] : null;
 
+          console.debug("New brick dropped at", { position, section, hoveredBrick });
+
           // Add the new brick to the store
           // Specify the parent if we dropped on a container
           draft.addBrick(
@@ -130,6 +131,8 @@ export default function EditablePage({ showIntro }: EditablePageProps) {
             hoveredBrick && hoveredBrickManifest?.isContainer ? hoveredBrick.id : null,
           );
 
+          console.log("New brick added", newBrick, section.id);
+
           if (previewMode === "desktop") {
             startTransition(() => {
               draft.adjustMobileLayout();

diff --git a/packages/components/src/editor/components/EditableSection.tsx b/packages/components/src/editor/components/EditableSection.tsx
@@ -96,6 +96,14 @@ export default function EditableSection({ section }: EditableSectionProps) {
             </EditableBrickWrapper>
           );
         })}
+
+      {bricks.length === 0 && (
+        <div className="absolute h-40 text-center inset-2 rounded bg-gray-100 flex justify-center items-center text-base text-black/50 font-medium">
+          This is a section.
+          <br />
+          Drag bricks here to stack them inside.
+        </div>
+      )}
     </section>
   );
 }
@@ -188,7 +196,9 @@ function SectionOptionsButtons({ section }: { section: SectionType }) {
         "bg-white/70 backdrop-blur-md transition-opacity duration-500  group-hover/section:opacity-80 flex",
       )}
     >
-      <div className={tx(btnCls, "cursor-default flex-col items-start justify-center gap-0")}>
+      <div
+        className={tx(btnCls, "cursor-pointer flex-col items-start justify-center gap-0 hover:text-black")}
+      >
         <div className="text-xs font-light leading-[0.9] ">Section</div>
         <div className="text-sm font-semibold -mt-1.5">{section.label ?? `${section.order + 1}`}</div>
       </div>
@@ -221,7 +231,11 @@ function SectionOptionsButtons({ section }: { section: SectionType }) {
         </Tooltip>
       )}
       <DropdownMenu.Root modal={false} >
-        <DropdownMenu.Trigger>
+        <DropdownMenu.Trigger
+           => {
+            e.stopPropagation();
+          }}
+        >
           <button type="button" className={tx(btnCls)}>
             <TbDots className="w-6 h-6" />
           </button>
@@ -246,12 +260,22 @@ function SectionOptionsButtons({ section }: { section: SectionType }) {
           </DropdownMenu.Group>
           <DropdownMenu.Separator />
           <DropdownMenu.Group>
+            <DropdownMenu.Item
+               => {
+                e.stopPropagation();
+                draftHelpers.createEmptySection(section.id);
+              }}
+            >
+              <div className="flex items-center justify-start gap-2">
+                <span>Create new section below</span>
+              </div>
+            </DropdownMenu.Item>
             <DropdownMenu.Item  => draftHelpers.duplicateSection(section.id)}>
               <div className="flex items-center justify-start gap-2">
                 <span>Duplicate</span>
               </div>
             </DropdownMenu.Item>
-            <DropdownMenu.Item
+            {/* <DropdownMenu.Item
                => {
                 setSelectedSectionId(section.id);
                 setPanel("inspector");
@@ -260,7 +284,7 @@ function SectionOptionsButtons({ section }: { section: SectionType }) {
               <div className="flex items-center justify-start gap-2">
                 <span>Settings</span>
               </div>
-            </DropdownMenu.Item>
+            </DropdownMenu.Item> */}
           </DropdownMenu.Group>
           <DropdownMenu.Separator />
           <DropdownMenu.Item

diff --git a/packages/components/src/editor/components/NavBar.tsx b/packages/components/src/editor/components/NavBar.tsx
@@ -132,7 +132,6 @@ export default function NavBar() {
 
   return (
     <nav
-      role="navigation"
       className={tx(
         `z-[9999] h-full gap-1 px-4 flex text-xl w-full items-center transition-opacity duration-300
         text-black/70 dark:text-dark-200 bg-white`,

diff --git a/packages/components/src/editor/components/PageHierarchy.tsx b/packages/components/src/editor/components/PageHierarchy.tsx
@@ -3,11 +3,17 @@ import type { Brick, Section } from "@upstart.gg/sdk/shared/bricks";
 import { manifests } from "@upstart.gg/sdk/bricks/manifests/all-manifests";
 import { tx } from "@upstart.gg/style-system/twind";
 import { PanelBlockTitle } from "./PanelBlockTitle";
+import { useEffect, useState } from "react";
 
 export default function PageHierarchy({ brick: selectedBrick }: { brick?: Brick; section: Section }) {
   const { setSelectedBrickId, setSelectedSectionId } = useEditorHelpers();
   const sections = useSections();
   const currentSectionId = useSelectedSectionId();
+  const [hoverElement, setHoverElement] = useState<{ type: string; id: string }>();
+
+  useEffect(() => {
+    console.log("hoverElement changed", hoverElement);
+  }, [hoverElement]);
 
   function mapBricks(bricks: Brick[], level = 0) {
     return bricks.map((brick) => {
@@ -30,6 +36,8 @@ export default function PageHierarchy({ brick: selectedBrick }: { brick?: Brick;
               console.log("clicking on brick %s", brick.id);
               setSelectedBrickId(brick.id);
             }}
+             => setHoverElement({ type: "brick", id: brick.id })}
+             => setHoverElement(undefined)}
           >
             <div className="flex items-center justify-between group transition-all">
               <span className="inline-flex items-center gap-1.5">

diff --git a/packages/components/src/editor/components/PanelAttributes.tsx b/packages/components/src/editor/components/PanelAttributes.tsx
@@ -8,21 +8,12 @@ import { ScrollablePanelTab } from "./ScrollablePanelTab";
 import { tx, css } from "@upstart.gg/style-system/twind";
 import FormNavigator from "./json-form/FormNavigator";
 import AttributesSettingsView from "./AttributesSettingsView";
-import { TObject } from "@sinclair/typebox";
 
 export default function SettingsForm() {
-  const draft = useDraft();
-  const attributes = useAttributes();
   const attrSchema = useAttributesSchema();
   const [shouldRender, setShouldRender] = useState(false);
   const [currentTab, setCurrentTab] = useState("page-settings");
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: draft.updateAttributes is a stable function
-  const  Record<string, unknown>, propertyChanged: string) => {
-    console.log("changed attr %o", data);
-    draft.updateAttributes(data as Attributes);
-  }, []);
-
   const filteredAttrSchema = useMemo(() => {
     const filteredSchema = {
       ...attrSchema,