@drawnagency/primitives 0.1.41 → 0.1.43

package/src/components/sections/IconList/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { List } from "lucide-react";
 import IconList from "./IconList";
 import { IconListSettings } from "./IconListSettings";
 
@@ -18,6 +19,7 @@ const schema = z.object({
 export default defineSection({
   type: "icon_list",
   label: "Icon List",
+  icon: <List size={18} />,
   schema,
   component: ({ content, options, onChange }) => (
     <IconList

package/src/components/sections/LinkHeading/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { Heading1 } from "lucide-react";
 import { HeadingSection } from "../../primitives/HeadingSection";
 
 const schema = z.object({
@@ -10,6 +11,7 @@ const schema = z.object({
 export default defineSection({
   type: "link_heading",
   label: "Link Heading",
+  icon: <Heading1 size={18} />,
   schema,
   navRole: "h1",
   component: ({ content, onChange }) => (

package/src/components/sections/MediaGrid/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { LayoutGrid } from "lucide-react";
 import { MediaReferenceSchema } from "../../../schemas/shared";
 import { MediaGridOptionsSchema } from "../../../schemas/media-grid-options";
 import MediaGrid from "./MediaGrid";
@@ -16,6 +17,7 @@ const schema = z.object({
 export default defineSection({
   type: "media_grid",
   label: "Media Grid",
+  icon: <LayoutGrid size={18} />,
   schema,
   component: ({ content, options, onChange, openModal }) => (
     <MediaGrid

package/src/components/sections/Prose/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { AlignLeft } from "lucide-react";
 import Prose from "./Prose";
 import { stripHtmlToPlainText, truncate } from "../../../lib/text";
 
@@ -11,6 +12,7 @@ const schema = z.object({
 export default defineSection({
   type: "prose",
   label: "Prose",
+  icon: <AlignLeft size={18} />,
   schema,
   component: ({ content, onChange }) => (
     <Prose body={content.content.body} onChange={onChange ? (c) => onChange(c as typeof content) : undefined} />

package/src/components/sections/SplitContent/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { Columns2 } from "lucide-react";
 import SplitContent from "./SplitContent";
 import { stripHtmlToPlainText, truncate } from "../../../lib/text";
 
@@ -18,6 +19,7 @@ const schema = z.object({
 export default defineSection({
   type: "split_content",
   label: "Split Content",
+  icon: <Columns2 size={18} />,
   schema,
   component: ({ content, options, onChange }) => (
     <SplitContent

package/src/components/sections/SubHeading/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { Heading2 } from "lucide-react";
 import { HeadingSection } from "../../primitives/HeadingSection";
 
 const schema = z.object({
@@ -10,6 +11,7 @@ const schema = z.object({
 export default defineSection({
   type: "sub_heading",
   label: "Sub Heading",
+  icon: <Heading2 size={18} />,
   schema,
   navRole: "h2",
   component: ({ content, onChange }) => (

package/src/components/sections/SubSubHeading/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { Heading3 } from "lucide-react";
 import { HeadingSection } from "../../primitives/HeadingSection";
 
 const schema = z.object({
@@ -10,6 +11,7 @@ const schema = z.object({
 export default defineSection({
   type: "sub_sub_heading",
   label: "Sub Sub Heading",
+  icon: <Heading3 size={18} />,
   schema,
   navRole: "h3",
   component: ({ content, onChange }) => (

package/src/components/shell/BugReportFAB.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import { createClient } from "@supabase/supabase-js";
+import type { Database, Json } from "../../types/database";
 import { EditorModal } from "./EditorModal";
 import { useEditorContext } from "./EditorContext";
 import { env } from "../../lib/env";
@@ -8,13 +9,14 @@ interface Props {
   siteId: string;
 }
 
-type Category = "Visual" | "Unexpected Behavior" | "Media / Media Library" | "Save / Publish" | "Other";
+type Category = "Visual" | "Unexpected Behavior" | "Media / Media Library" | "Save / Publish" | "Feature Request" | "Other";
 
 const CATEGORIES: Category[] = [
   "Visual",
   "Unexpected Behavior",
   "Media / Media Library",
   "Save / Publish",
+  "Feature Request",
   "Other",
 ];
 
@@ -148,13 +150,17 @@ export function BugReportFAB({ siteId }: Props) {
     setIsSubmitting(true);
 
     try {
-      const supabase = createClient(
+      const supabase = createClient<Database>(
         env("SUPABASE_URL"),
         env("SUPABASE_ANON_KEY"),
       );
 
       const { data: userData } = await supabase.auth.getUser();
-      const userId = userData?.user?.id ?? null;
+      const userId = userData?.user?.id;
+      if (!userId) {
+        setSubmitError("You must be signed in to report a bug.");
+        return;
+      }
 
       const { error } = await supabase.from("bug_reports").insert({
         site_id: siteId,
@@ -163,7 +169,7 @@ export function BugReportFAB({ siteId }: Props) {
         is_critical: isCritical,
         description: description.trim(),
         images: images.map((img) => img.dataUri),
-        context: capturedContextRef.current,
+        context: capturedContextRef.current as Json,
       });
 
       if (error) {
@@ -245,7 +251,7 @@ export function BugReportFAB({ siteId }: Props) {
                 } mt-0.5`}
               />
             </button>
-            <span className="text-sm text-base-contrast">This is blocking my work</span>
+            <span className="text-sm text-base-contrast">Critical / Blocking</span>
           </div>
 
           {/* Description */}
@@ -328,7 +334,7 @@ export function BugReportFAB({ siteId }: Props) {
             disabled={isSubmitting}
             className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-contrast hover:opacity-90 transition-opacity disabled:opacity-60"
           >
-            {isSubmitting ? "Submitting..." : "Submit Report"}
+            {isSubmitting ? "Submitting..." : "Submit"}
           </button>
         </div>
       </EditorModal>

package/src/components/shell/EditorShell.tsx

@@ -192,6 +192,8 @@ export default function EditorShell({
     root.style.setProperty("--font-heading", `${config.headingFont}, system-ui, sans-serif`);
     root.style.setProperty("--font-body", `${config.bodyFont}, system-ui, sans-serif`);
     root.style.setProperty("--heading-text-transform", config.uppercaseHeadings ? "uppercase" : "none");
+    root.style.setProperty("--subheading-text-transform", config.uppercaseSubheadings ? "uppercase" : "none");
+    root.style.setProperty("--nav-text-transform", config.uppercaseNavHeadings ? "uppercase" : "none");
 
     if (config.googleFontsUrl) {
       if (fontLinkRef.current?.href !== config.googleFontsUrl) {
@@ -885,9 +887,7 @@ function EditorContent({
       getAllSections().map((def) => ({
         type: def.type,
         label: def.label,
-        icon: def.icon
-          ? () => <>{def.icon}</>
-          : () => null,
+        icon: def.icon,
       })),
     [],
   );

package/src/components/shell/SectionSkeleton.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { SectionTypePicker, type TypeOption } from "./SectionTypePicker";
 import { SectionLayout } from "../sections/SectionLayout";
 import { cn } from "../../lib/cn";
@@ -11,10 +11,13 @@ interface SectionSkeletonProps {
 
 export function SectionSkeleton({ types, onSelect, onDismiss }: SectionSkeletonProps) {
   const [isVisible, setIsVisible] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    // Trigger animation on next frame
-    requestAnimationFrame(() => setIsVisible(true));
+    requestAnimationFrame(() => {
+      setIsVisible(true);
+      containerRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
   }, []);
 
   useEffect(() => {
@@ -30,24 +33,22 @@ export function SectionSkeleton({ types, onSelect, onDismiss }: SectionSkeletonP
   return (
     <SectionLayout type="skeleton" status="draft">
       <div
+        ref={containerRef}
         className={cn(
           "relative transition-all duration-200",
           isVisible ? "opacity-100" : "opacity-0 -translate-y-2",
         )}
       >
-        {/* Placeholder block */}
-        <div className="flex h-20 items-center justify-center rounded-lg bg-base-accent">
-          <span className="text-sm text-base-contrast-light/50">New section</span>
+        <div className="flex h-16 items-center justify-center rounded-lg bg-base-accent">
+          <span className="text-sm text-base-contrast-light/50">Choose a section type</span>
         </div>
 
-        {/* Type picker — centered below skeleton */}
-        <div className="relative flex justify-center">
-          <SectionTypePicker
-            types={types}
-            onSelect={onSelect}
-            onClose={onDismiss}
-          />
-        </div>
+        <SectionTypePicker
+          types={types}
+          onSelect={onSelect}
+          onClose={onDismiss}
+          containerRef={containerRef}
+        />
       </div>
     </SectionLayout>
   );

package/src/components/shell/SectionTypePicker.tsx

@@ -1,44 +1,48 @@
-import { useEffect, useRef, type ComponentType } from "react";
+import { useEffect, useRef, type ReactNode, type RefObject } from "react";
 
 export interface TypeOption {
   type: string;
   label: string;
-  icon: ComponentType;
+  icon?: ReactNode;
 }
 
 interface SectionTypePickerProps {
   types: TypeOption[];
   onSelect: (type: string) => void;
   onClose: () => void;
+  containerRef?: RefObject<HTMLElement | null>;
 }
 
-export function SectionTypePicker({ types, onSelect, onClose }: SectionTypePickerProps) {
+export function SectionTypePicker({ types, onSelect, onClose, containerRef }: SectionTypePickerProps) {
   const panelRef = useRef<HTMLDivElement>(null);
+  const dismissRef = containerRef ?? panelRef;
 
   useEffect(() => {
     function handleMouseDown(e: MouseEvent) {
-      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+      if (dismissRef.current && !dismissRef.current.contains(e.target as Node)) {
         onClose();
       }
     }
     document.addEventListener("mousedown", handleMouseDown);
     return () => document.removeEventListener("mousedown", handleMouseDown);
-  }, [onClose]);
+  }, [onClose, dismissRef]);
 
   return (
     <div
       ref={panelRef}
-      className="absolute z-50 mt-1 w-64 rounded-lg border border-base-200 bg-base p-2 shadow-lg"
+      className="z-50 mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3"
     >
-      {types.map(({ type, label, icon: Icon }) => (
+      {types.map(({ type, label, icon }) => (
         <button
           key={type}
-          className="cursor-pointer flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm text-base-contrast-light hover:bg-base-accent hover:text-base-contrast"
+          className="cursor-pointer flex items-center gap-3 rounded-lg border border-base-200 bg-base px-4 py-3 text-left text-sm text-base-contrast-light transition-colors hover:border-base-300 hover:bg-base-accent hover:text-base-contrast"
           onClick={() => onSelect(type)}
         >
-          <span className="flex h-6 w-6 items-center justify-center text-base">
-            <Icon />
-          </span>
+          {icon && (
+            <span className="flex h-5 w-5 shrink-0 items-center justify-center text-base-contrast-light/60">
+              {icon}
+            </span>
+          )}
           <span>{label}</span>
         </button>
       ))}

package/src/components/shell/SiteSettingsDisplay.tsx

@@ -75,6 +75,18 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
         label="Uppercase headings"
       />
 
+      <Checkbox
+        checked={siteConfig.uppercaseSubheadings}
+        onChange={(v) => update({ uppercaseSubheadings: v })}
+        label="Uppercase subheadings"
+      />
+
+      <Checkbox
+        checked={siteConfig.uppercaseNavHeadings}
+        onChange={(v) => update({ uppercaseNavHeadings: v })}
+        label="Uppercase nav headings"
+      />
+
       <FontPicker
         label="Body font"
         value={siteConfig.bodyFont}

package/src/lib/registry.ts

@@ -95,7 +95,7 @@ export interface WrapperProps {
 export interface SectionDefinition<T = unknown> {
   type: string;
   label: string;
-  icon?: string;
+  icon?: ReactNode;
   schema: ZodType<T>;
   component: ComponentType<SectionProps<T>>;
   defaults: () => T;
@@ -113,7 +113,7 @@ export interface SectionDefinition<T = unknown> {
 type DefineSectionInput<S extends ZodType> = {
   type: string;
   label: string;
-  icon?: string;
+  icon?: ReactNode;
   schema: S;
   component: ComponentType<SectionProps<z.infer<S>>>;
   defaults: () => z.infer<S>;

package/src/schemas/site-config.ts

@@ -38,6 +38,8 @@ export const SiteConfigSchema = z.object({
   headingFont: z.string().default("system-ui"),
   bodyFont: z.string().default("system-ui"),
   uppercaseHeadings: z.boolean().default(true),
+  uppercaseSubheadings: z.boolean().default(true),
+  uppercaseNavHeadings: z.boolean().default(true),
   googleFontsUrl: z.string()
     .refine(url => url.startsWith("https://fonts.googleapis.com/"), "Must be a Google Fonts URL")
     .nullable()