@hyperframes/studio 0.7.58 → 0.7.59

package/src/components/editor/propertyPanelFont.tsx

@@ -18,6 +18,7 @@ import {
   type FontOption,
   type LocalFontData,
 } from "./propertyPanelHelpers";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 
 /* ------------------------------------------------------------------ */
 /*  Font helper functions                                              */
@@ -123,16 +124,19 @@ function loadImportedFontStylesheet(asset: ImportedFontAsset): void {
 export function FontFamilyField({
   value,
   disabled,
+  flat,
   importedFonts,
   onImportFonts,
   onCommit,
 }: {
   value: string;
   disabled?: boolean;
+  flat?: boolean;
   importedFonts: ImportedFontAsset[];
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
   onCommit: (nextValue: string) => void;
 }) {
+  const track = useTrackDesignInput();
   const currentFamily = primaryFontFamily(value);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -148,6 +152,10 @@ export function FontFamilyField({
   const [fontNotice, setFontNotice] = useState<string | null>(null);
   const canQueryLocalFonts =
     typeof window !== "undefined" && typeof window.queryLocalFonts === "function";
+  const commitFontFamily = (nextValue: string) => {
+    if (nextValue !== value) track("select", "Font family");
+    onCommit(nextValue);
+  };
 
   useEffect(() => {
     if (!open) return;
@@ -245,7 +253,7 @@ export function FontFamilyField({
       for (const font of imported) loadImportedFontStylesheet(font);
       const first = imported[0];
       if (first) {
-        onCommit(buildFontFamilyValue(first.family));
+        commitFontFamily(buildFontFamilyValue(first.family));
         setQuery("");
         setOpen(false);
       } else {
@@ -347,7 +355,7 @@ export function FontFamilyField({
             : await importSystemFont(option.family);
         if (imported) {
           loadImportedFontStylesheet(imported);
-          onCommit(buildFontFamilyValue(imported.family));
+          commitFontFamily(buildFontFamilyValue(imported.family));
           setQuery("");
           setOpen(false);
           return;
@@ -361,11 +369,135 @@ export function FontFamilyField({
       (f) => f.family.toLowerCase() === option.family.toLowerCase(),
     );
     if (imported) loadImportedFontStylesheet(imported);
-    onCommit(buildFontFamilyValue(option.family));
+    commitFontFamily(buildFontFamilyValue(option.family));
     setQuery("");
     setOpen(false);
   };
 
+  const dropdown = open && (
+    <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-xl border border-neutral-700 bg-neutral-950 shadow-2xl">
+      <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] gap-2 border-b border-neutral-800 p-2">
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          disabled={disabled}
+          placeholder={loadingGoogleFonts ? "Loading Google Fonts..." : "Search fonts"}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              setOpen(false);
+            }
+            if (e.key === "Enter" && filteredOptions[0]) {
+              e.preventDefault();
+              commitFamily(filteredOptions[0]);
+            }
+          }}
+          className="min-w-0 rounded-lg border border-neutral-800 bg-neutral-900 px-2.5 py-2 text-[11px] font-medium text-neutral-100 outline-none placeholder:text-neutral-600 focus:border-neutral-600"
+        />
+        {canQueryLocalFonts && (
+          <button
+            type="button"
+            disabled={disabled || loadingLocalFonts}
+            onClick={loadBrowserLocalFonts}
+            className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700"
+          >
+            {loadingLocalFonts ? "..." : "Local"}
+          </button>
+        )}
+        <button
+          type="button"
+          disabled={disabled || importingFonts || !onImportFonts}
+          onClick={() => fontInputRef.current?.click()}
+          className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700"
+        >
+          {importingFonts ? "..." : "Import"}
+        </button>
+        <input
+          ref={fontInputRef}
+          type="file"
+          accept=".ttf,.otf,.ttc,.woff,.woff2,.eot,font/*"
+          multiple
+          aria-label="Import local font files"
+          disabled={disabled || importingFonts || !onImportFonts}
+          className="hidden"
+          onChange={async (event) => {
+            await handleImportFonts(event.target.files);
+            event.target.value = "";
+          }}
+        />
+      </div>
+      {fontNotice && (
+        <div className="border-b border-neutral-800 px-3 py-2 text-[10px] leading-4 text-neutral-500">
+          {fontNotice}
+        </div>
+      )}
+      <div className="max-h-64 overflow-y-auto p-1">
+        {filteredOptions.length === 0 ? (
+          <div className="px-2 py-3 text-[11px] text-neutral-500">No fonts found.</div>
+        ) : (
+          filteredOptions.map((option) => (
+            <button
+              key={`${option.source}-${option.family}`}
+              type="button"
+              onClick={() => commitFamily(option)}
+              className={`flex w-full min-w-0 items-center justify-between gap-3 rounded-lg px-2 py-2 text-left text-[11px] transition-colors ${
+                option.family === currentFamily
+                  ? "bg-studio-accent/15 text-neutral-50"
+                  : "text-neutral-300 hover:bg-neutral-900 hover:text-neutral-100"
+              }`}
+            >
+              <span className="flex min-w-0 items-center gap-1.5">
+                <span className="truncate font-medium">{option.family}</span>
+                {renderAliasFor(option.family) && (
+                  <span className="flex-shrink-0 text-[9px] text-neutral-500">
+                    → {renderAliasFor(option.family)}
+                  </span>
+                )}
+              </span>
+              <span className="flex-shrink-0 text-[9px] uppercase tracking-[0.14em] text-neutral-600">
+                {option.source}
+              </span>
+            </button>
+          ))
+        )}
+      </div>
+    </div>
+  );
+
+  if (flat) {
+    return (
+      <div ref={containerRef} className="relative flex min-h-[30px] items-center justify-between">
+        <span className="text-[11px] text-panel-text-2">Font</span>
+        <button
+          type="button"
+          data-flat-font-trigger="true"
+          disabled={disabled}
+          onClick={() => setOpen((next) => !next)}
+          className="flex items-center gap-1.5 disabled:cursor-not-allowed"
+        >
+          <span
+            className="max-w-[200px] truncate font-mono text-[11px] text-panel-text-0"
+            style={{ fontFamily: value }}
+          >
+            {currentFamily}
+          </span>
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="currentColor"
+            className="flex-shrink-0 text-panel-text-5"
+          >
+            <path d="M2 3l3 4 3-4z" />
+          </svg>
+        </button>
+        {dropdown}
+      </div>
+    );
+  }
+
   return (
     <div ref={containerRef} className="relative grid min-w-0 gap-1.5">
       <span className={LABEL}>Font family</span>
@@ -385,98 +517,7 @@ export function FontFamilyField({
           Font
         </span>
       </button>
-
-      {open && (
-        <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-xl border border-neutral-700 bg-neutral-950 shadow-2xl">
-          <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] gap-2 border-b border-neutral-800 p-2">
-            <input
-              ref={inputRef}
-              type="text"
-              value={query}
-              disabled={disabled}
-              placeholder={loadingGoogleFonts ? "Loading Google Fonts..." : "Search fonts"}
-              onChange={(e) => setQuery(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Escape") {
-                  e.preventDefault();
-                  setOpen(false);
-                }
-                if (e.key === "Enter" && filteredOptions[0]) {
-                  e.preventDefault();
-                  commitFamily(filteredOptions[0]);
-                }
-              }}
-              className="min-w-0 rounded-lg border border-neutral-800 bg-neutral-900 px-2.5 py-2 text-[11px] font-medium text-neutral-100 outline-none placeholder:text-neutral-600 focus:border-neutral-600"
-            />
-            {canQueryLocalFonts && (
-              <button
-                type="button"
-                disabled={disabled || loadingLocalFonts}
-                onClick={loadBrowserLocalFonts}
-                className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700"
-              >
-                {loadingLocalFonts ? "..." : "Local"}
-              </button>
-            )}
-            <button
-              type="button"
-              disabled={disabled || importingFonts || !onImportFonts}
-              onClick={() => fontInputRef.current?.click()}
-              className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700"
-            >
-              {importingFonts ? "..." : "Import"}
-            </button>
-            <input
-              ref={fontInputRef}
-              type="file"
-              accept=".ttf,.otf,.ttc,.woff,.woff2,.eot,font/*"
-              multiple
-              aria-label="Import local font files"
-              disabled={disabled || importingFonts || !onImportFonts}
-              className="hidden"
-              onChange={async (event) => {
-                await handleImportFonts(event.target.files);
-                event.target.value = "";
-              }}
-            />
-          </div>
-          {fontNotice && (
-            <div className="border-b border-neutral-800 px-3 py-2 text-[10px] leading-4 text-neutral-500">
-              {fontNotice}
-            </div>
-          )}
-          <div className="max-h-64 overflow-y-auto p-1">
-            {filteredOptions.length === 0 ? (
-              <div className="px-2 py-3 text-[11px] text-neutral-500">No fonts found.</div>
-            ) : (
-              filteredOptions.map((option) => (
-                <button
-                  key={`${option.source}-${option.family}`}
-                  type="button"
-                  onClick={() => commitFamily(option)}
-                  className={`flex w-full min-w-0 items-center justify-between gap-3 rounded-lg px-2 py-2 text-left text-[11px] transition-colors ${
-                    option.family === currentFamily
-                      ? "bg-studio-accent/15 text-neutral-50"
-                      : "text-neutral-300 hover:bg-neutral-900 hover:text-neutral-100"
-                  }`}
-                >
-                  <span className="flex min-w-0 items-center gap-1.5">
-                    <span className="truncate font-medium">{option.family}</span>
-                    {renderAliasFor(option.family) && (
-                      <span className="flex-shrink-0 text-[9px] text-neutral-500">
-                        → {renderAliasFor(option.family)}
-                      </span>
-                    )}
-                  </span>
-                  <span className="flex-shrink-0 text-[9px] uppercase tracking-[0.14em] text-neutral-600">
-                    {option.source}
-                  </span>
-                </button>
-              ))
-            )}
-          </div>
-        </div>
-      )}
+      {dropdown}
     </div>
   );
 }

package/src/components/editor/propertyPanelHelpers.ts

@@ -29,6 +29,26 @@ export function isSelectedElementHidden(
   );
 }
 
+/**
+ * 5-part element identity for keying panel remounts on selection change —
+ * id or selector alone collides for id-less same-selector siblings, leaving
+ * mount-initialized state pointed at the previous element. sourceFile is
+ * required too: the same local id/selector can legitimately recur across
+ * different composition files (host vs. an inlined sub-composition, or two
+ * unrelated sub-comps), and without it those collide onto the same key.
+ */
+export function selectionIdentityKey(
+  element: Pick<DomEditSelection, "id" | "hfId" | "selector" | "selectorIndex" | "sourceFile">,
+): string {
+  return [
+    element.id ?? "",
+    element.hfId ?? "",
+    element.selector ?? "",
+    String(element.selectorIndex ?? ""),
+    element.sourceFile ?? "",
+  ].join("|");
+}
+
 /* ------------------------------------------------------------------ */
 /*  Font types & constants (shared by font and section modules)        */
 /* ------------------------------------------------------------------ */
@@ -505,3 +525,56 @@ export function readGsapBorderRadiusForPanel(
     return null;
   }
 }
+
+/**
+ * Builds the multi-line "element info" text copied to the clipboard for an AI
+ * agent. Shared by both the legacy and flat inspector headers (the flat split
+ * needs the same string), so it lives here rather than as a PropertyPanel
+ * closure. Pure — the caller owns the clipboard write, toast, and copied state.
+ */
+// fallow-ignore-next-line complexity
+export function buildElementInfoText(
+  element: DomEditSelection,
+  sourceLabel: string,
+  gsapAnimations: GsapAnimation[],
+  previewIframeRef?: React.RefObject<HTMLIFrameElement | null>,
+): string {
+  const file = element.sourceFile ?? "index.html";
+  let lineNum: number | null = null;
+  try {
+    const src = previewIframeRef?.current?.contentDocument?.documentElement?.outerHTML ?? "";
+    if (src && element.id) {
+      const idx = src.indexOf(`id="${element.id}"`);
+      if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
+    }
+    if (!lineNum && element.selector) {
+      const tag = element.tagName.toLowerCase();
+      const cls = element.selector.startsWith(".") ? element.selector.slice(1).split(".")[0] : null;
+      const search = cls ? `class="${cls}` : `<${tag}`;
+      const idx = src.indexOf(search);
+      if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
+    }
+  } catch {}
+  const fileLoc = lineNum ? `${file}:${lineNum}` : file;
+  const lines = [
+    `Element: ${element.label} (${sourceLabel})`,
+    `File: ${fileLoc}`,
+    `Position: x=${Math.round(element.boundingBox.x)}, y=${Math.round(element.boundingBox.y)}`,
+    `Size: ${Math.round(element.boundingBox.width)}×${Math.round(element.boundingBox.height)}`,
+    `Tag: <${element.tagName}>`,
+  ];
+  if (element.computedStyles["z-index"] && element.computedStyles["z-index"] !== "auto") {
+    lines.push(`Z-index: ${element.computedStyles["z-index"]}`);
+  }
+  if (gsapAnimations.length > 0) {
+    const anim = gsapAnimations[0];
+    lines.push(
+      `Animation: ${anim.method}() ${anim.duration}s at ${anim.position}s, ease: ${anim.ease ?? "default"}`,
+    );
+    const props = Object.entries(anim.properties)
+      .map(([k, v]) => `${k}: ${v}`)
+      .join(", ");
+    if (props) lines.push(`Properties: ${props}`);
+  }
+  return lines.join("\n");
+}