@hyperframes/studio 0.6.0-alpha.8 → 0.6.0

package/src/components/editor/propertyPanelSections.tsx

@@ -0,0 +1,453 @@
+import { useEffect, useRef, useState } from "react";
+import { Plus, Type } from "../../icons/SystemIcons";
+import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
+import type { ImportedFontAsset } from "./fontAssets";
+import { FIELD, LABEL, normalizeTextMetricValue, RESPONSIVE_GRID } from "./propertyPanelHelpers";
+import { MetricField, Section, SelectField } from "./propertyPanelPrimitives";
+import { ColorField } from "./propertyPanelColor";
+import { FontFamilyField } from "./propertyPanelFont";
+
+/* ------------------------------------------------------------------ */
+/*  Text helpers (used only by text section components)                */
+/* ------------------------------------------------------------------ */
+
+function formatTextFieldPreview(value: string): string {
+  const collapsed = value.trim().replace(/\s+/g, " ");
+  if (collapsed.length <= 56) return collapsed;
+  return `${collapsed.slice(0, 55)}…`;
+}
+
+function getTextFieldColor(
+  field: { computedStyles: Record<string, string> },
+  inheritedStyles: Record<string, string>,
+): string {
+  return field.computedStyles.color || inheritedStyles.color || "rgb(0, 0, 0)";
+}
+
+function getTextStyleValue(
+  field: { computedStyles: Record<string, string> },
+  inheritedStyles: Record<string, string>,
+  property: string,
+  fallback: string,
+): string {
+  return field.computedStyles[property] || inheritedStyles[property] || fallback;
+}
+
+const ALL_WEIGHTS = ["100", "200", "300", "400", "500", "600", "700", "800", "900"];
+const WEIGHT_LABELS: Record<string, string> = {
+  "100": "100 · Thin",
+  "200": "200 · Extra Light",
+  "300": "300 · Light",
+  "400": "400 · Regular",
+  "500": "500 · Medium",
+  "600": "600 · Semi Bold",
+  "700": "700 · Bold",
+  "800": "800 · Extra Bold",
+  "900": "900 · Black",
+};
+
+function detectAvailableWeights(fontFamily: string): string[] {
+  const fonts = document.fonts;
+  if (!fonts) return ALL_WEIGHTS;
+  const family = fontFamily.split(",")[0]?.trim().replace(/['"]/g, "");
+  if (!family) return ALL_WEIGHTS;
+  const available: string[] = [];
+  for (const w of ALL_WEIGHTS) {
+    if (fonts.check(`${w} 16px "${family}"`)) available.push(w);
+  }
+  return available.length > 0 ? available : ALL_WEIGHTS;
+}
+
+function TextAreaField({
+  label,
+  value,
+  disabled,
+  autoFocus,
+  onCommit,
+}: {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  onCommit: (nextValue: string) => void;
+}) {
+  const [draft, setDraft] = useState(value);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const commitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const focusedRef = useRef(false);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  useEffect(() => {
+    if (focusedRef.current) return;
+    setDraft(value);
+  }, [value]);
+  useEffect(
+    () => () => {
+      if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+    },
+    [],
+  );
+  useEffect(() => {
+    if (!autoFocus) return;
+    textareaRef.current?.focus();
+  }, [autoFocus]);
+
+  const commitDraft = (d: string) => {
+    if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+    if (d !== valueRef.current) onCommit(d);
+  };
+  const scheduleCommit = (d: string) => {
+    if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+    commitTimerRef.current = setTimeout(() => {
+      if (d !== valueRef.current) onCommit(d);
+    }, 120);
+  };
+
+  return (
+    <label className="grid min-w-0 gap-1.5">
+      <span className={LABEL}>{label}</span>
+      <div className={FIELD}>
+        <textarea
+          ref={textareaRef}
+          value={draft}
+          disabled={disabled}
+          rows={4}
+          onFocus={() => {
+            focusedRef.current = true;
+          }}
+          onChange={(e) => {
+            setDraft(e.target.value);
+            scheduleCommit(e.target.value);
+          }}
+          onBlur={() => {
+            focusedRef.current = false;
+            commitDraft(draft);
+          }}
+          className="w-full resize-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
+        />
+      </div>
+    </label>
+  );
+}
+
+function FontWeightField({
+  value,
+  disabled,
+  fontFamily,
+  onCommit,
+}: {
+  value: string;
+  disabled?: boolean;
+  fontFamily?: string;
+  onCommit: (nextValue: string) => void;
+}) {
+  const options = fontFamily ? detectAvailableWeights(fontFamily) : ALL_WEIGHTS;
+  const displayOptions = value && !options.includes(value) ? [value, ...options] : options;
+  return (
+    <div className={FIELD}>
+      <div className="flex min-w-0 items-center gap-3">
+        <span className="flex-shrink-0 text-[11px] font-medium text-neutral-500">Weight</span>
+        <select
+          value={value}
+          disabled={disabled}
+          onChange={(e) => onCommit(e.target.value)}
+          className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
+        >
+          {displayOptions.map((o) => (
+            <option key={o} value={o}>
+              {WEIGHT_LABELS[o] ?? o}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
+
+function AdvancedTextControls({
+  field,
+  inheritedStyles,
+  disabled,
+  onCommit,
+}: {
+  field: DomEditSelection["textFields"][number];
+  inheritedStyles: Record<string, string>;
+  disabled?: boolean;
+  onCommit: (property: string, value: string) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div className={RESPONSIVE_GRID}>
+        <SelectField
+          label="Line"
+          value={getTextStyleValue(field, inheritedStyles, "line-height", "normal")}
+          disabled={disabled}
+          options={["normal", "1", "1.1", "1.2", "1.25", "1.3", "1.4", "1.5", "1.6", "1.75", "2"]}
+          onChange={(n) => onCommit("line-height", normalizeTextMetricValue("line-height", n))}
+        />
+        <SelectField
+          label="Track"
+          value={getTextStyleValue(field, inheritedStyles, "letter-spacing", "0px")}
+          disabled={disabled}
+          options={[
+            "0px",
+            "-0.05em",
+            "-0.04em",
+            "-0.03em",
+            "-0.02em",
+            "-0.01em",
+            "0em",
+            "0.01em",
+            "0.02em",
+            "0.03em",
+            "0.05em",
+            "0.1em",
+            "0.15em",
+            "0.2em",
+          ]}
+          onChange={(n) =>
+            onCommit("letter-spacing", normalizeTextMetricValue("letter-spacing", n))
+          }
+        />
+      </div>
+      <div className={RESPONSIVE_GRID}>
+        <SelectField
+          label="Align"
+          value={getTextStyleValue(field, inheritedStyles, "text-align", "start")}
+          disabled={disabled}
+          onChange={(n) => onCommit("text-align", n)}
+          options={["start", "left", "center", "right", "justify", "end"]}
+        />
+        <SelectField
+          label="Case"
+          value={getTextStyleValue(field, inheritedStyles, "text-transform", "none")}
+          disabled={disabled}
+          onChange={(n) => onCommit("text-transform", n)}
+          options={["none", "uppercase", "lowercase", "capitalize"]}
+        />
+      </div>
+      <SelectField
+        label="Style"
+        value={getTextStyleValue(field, inheritedStyles, "font-style", "normal")}
+        disabled={disabled}
+        onChange={(n) => onCommit("font-style", n)}
+        options={["normal", "italic"]}
+      />
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Text section                                                       */
+/* ------------------------------------------------------------------ */
+
+function TextFieldEditor({
+  field,
+  styles,
+  fontAssets,
+  onImportFonts,
+  showRemove,
+  onSetText,
+  onSetTextFieldStyle,
+  onRemoveTextField,
+}: {
+  field: DomEditSelection["textFields"][number];
+  styles: Record<string, string>;
+  fontAssets: ImportedFontAsset[];
+  onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
+  showRemove: boolean;
+  onSetText: (value: string, fieldKey?: string) => void;
+  onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
+  onRemoveTextField: (fieldKey: string) => void;
+}) {
+  return (
+    <div className="space-y-4 rounded-xl border border-neutral-800 bg-neutral-900/60 p-3">
+      <div className={showRemove ? "flex min-w-0 items-center justify-between gap-2" : "min-w-0"}>
+        <div className="min-w-0">
+          <div className="truncate text-[11px] font-medium text-neutral-100">
+            {formatTextFieldPreview(field.value) || "Text"}
+          </div>
+          <div className="text-[10px] uppercase tracking-[0.12em] text-neutral-500">
+            {field.tagName}
+          </div>
+        </div>
+        {showRemove && (
+          <button
+            type="button"
+            onClick={() => onRemoveTextField(field.key)}
+            className="inline-flex h-7 flex-shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
+          >
+            Remove
+          </button>
+        )}
+      </div>
+      <TextAreaField
+        key={field.key}
+        label="Content"
+        value={field.value}
+        disabled={false}
+        autoFocus={showRemove}
+        onCommit={(next) => onSetText(next, field.key)}
+      />
+      <ColorField
+        label="Text color"
+        value={getTextFieldColor(field, styles)}
+        disabled={false}
+        onCommit={(next) => onSetTextFieldStyle(field.key, "color", next)}
+      />
+      <div className={RESPONSIVE_GRID}>
+        <MetricField
+          label="Size"
+          value={field.computedStyles["font-size"] || styles["font-size"] || "16px"}
+          disabled={false}
+          liveCommit
+          onCommit={(next) => onSetTextFieldStyle(field.key, "font-size", next)}
+        />
+        <FontWeightField
+          value={field.computedStyles["font-weight"] || styles["font-weight"] || "400"}
+          fontFamily={field.computedStyles["font-family"] || styles["font-family"]}
+          disabled={false}
+          onCommit={(next) => onSetTextFieldStyle(field.key, "font-weight", next)}
+        />
+      </div>
+      <FontFamilyField
+        value={field.computedStyles["font-family"] || styles["font-family"] || "inherit"}
+        disabled={false}
+        importedFonts={fontAssets}
+        onImportFonts={onImportFonts}
+        onCommit={(next) => onSetTextFieldStyle(field.key, "font-family", next)}
+      />
+      <AdvancedTextControls
+        field={field}
+        inheritedStyles={styles}
+        disabled={false}
+        onCommit={(property, value) => onSetTextFieldStyle(field.key, property, value)}
+      />
+    </div>
+  );
+}
+
+export function TextSection({
+  element,
+  styles,
+  fontAssets,
+  onImportFonts,
+  onSetText,
+  onSetTextFieldStyle,
+  onAddTextField,
+  onRemoveTextField,
+}: {
+  element: DomEditSelection;
+  styles: Record<string, string>;
+  fontAssets: ImportedFontAsset[];
+  onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
+  onSetText: (value: string, fieldKey?: string) => void;
+  onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
+  onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
+  onRemoveTextField: (fieldKey: string) => void;
+}) {
+  const hasTextControls = isTextEditableSelection(element);
+  const [activeTextFieldKey, setActiveTextFieldKey] = useState<string | null>(
+    element.textFields[0]?.key ?? null,
+  );
+
+  useEffect(() => {
+    const nextFields = element.textFields;
+    setActiveTextFieldKey((current) => {
+      if (current && nextFields.some((field) => field.key === current)) return current;
+      return nextFields[0]?.key ?? null;
+    });
+  }, [element.id, element.selector, element.textFields]);
+
+  if (!hasTextControls) return null;
+
+  const textFields = element.textFields;
+  const activeField = textFields.find((field) => field.key === activeTextFieldKey) ?? textFields[0];
+  if (!activeField) return null;
+
+  if (textFields.length === 1) {
+    return (
+      <Section title="Text" icon={<Type size={15} />}>
+        <TextFieldEditor
+          field={activeField}
+          styles={styles}
+          fontAssets={fontAssets}
+          onImportFonts={onImportFonts}
+          showRemove={false}
+          onSetText={onSetText}
+          onSetTextFieldStyle={onSetTextFieldStyle}
+          onRemoveTextField={onRemoveTextField}
+        />
+      </Section>
+    );
+  }
+
+  return (
+    <Section title="Text" icon={<Type size={15} />}>
+      <div className="space-y-4">
+        <div className="grid gap-1.5">
+          <div className="flex min-w-0 flex-wrap items-center justify-between gap-2">
+            <span className={LABEL}>Text layers</span>
+            <button
+              type="button"
+              onClick={() => {
+                void Promise.resolve(onAddTextField(activeField.key)).then((nextKey) => {
+                  if (nextKey) setActiveTextFieldKey(nextKey);
+                });
+              }}
+              className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
+            >
+              <Plus size={12} className="flex-shrink-0" />
+              <span className="truncate">Add text</span>
+            </button>
+          </div>
+          <div className="grid gap-2">
+            {textFields.map((field, index) => {
+              const active = field.key === activeField.key;
+              return (
+                <button
+                  key={field.key}
+                  type="button"
+                  onClick={() => setActiveTextFieldKey(field.key)}
+                  className={`min-w-0 w-full rounded-xl border px-3 py-2 text-left transition-colors ${
+                    active
+                      ? "border-studio-accent/50 bg-studio-accent/10"
+                      : "border-neutral-800 bg-neutral-900/80 hover:border-neutral-700 hover:bg-neutral-900"
+                  }`}
+                >
+                  <div className="flex min-w-0 items-center justify-between gap-2">
+                    <div className="flex min-w-0 items-center gap-2">
+                      <span
+                        className="h-4 w-4 flex-shrink-0 rounded border border-neutral-700 bg-neutral-950"
+                        style={{ backgroundColor: getTextFieldColor(field, styles) }}
+                      />
+                      <span className="min-w-0 truncate text-[11px] font-medium text-neutral-100">
+                        {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
+                      </span>
+                    </div>
+                    <span className="flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] uppercase tracking-[0.12em] text-neutral-500">
+                      {field.tagName}
+                    </span>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        <TextFieldEditor
+          field={activeField}
+          styles={styles}
+          fontAssets={fontAssets}
+          onImportFonts={onImportFonts}
+          showRemove={true}
+          onSetText={onSetText}
+          onSetTextFieldStyle={onSetTextFieldStyle}
+          onRemoveTextField={onRemoveTextField}
+        />
+      </div>
+    </Section>
+  );
+}
+
+export { StyleSections } from "./propertyPanelStyleSections";