@drawnagency/primitives 0.1.42 → 0.1.44

package/src/components/shell/EditorShell.tsx

@@ -47,6 +47,7 @@ import { formatTimestamp } from "../../lib/timestamp";
 import { generateNavLinks } from "../../lib/nav";
 import { navChangeEvent, darkModeEvent, historySelectEvent } from "../../lib/events";
 import { cn } from "../../lib/cn";
+import { UploadRejectionAlert, formatRejections } from "../shared/UploadRejectionAlert";
 import { Button } from "../shared/Button";
 import { SplitButton } from "../shared/SplitButton";
 import { IconButton } from "../shared/IconButton";
@@ -110,6 +111,7 @@ export default function EditorShell({
   const [showRestoreModal, setShowRestoreModal] = useState(false);
   const [showOrderingModal, setShowOrderingModal] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
+  const [rejectedUploads, setRejectedUploads] = useState<{ name: string; reason: "size" | "type" }[]>([]);
 
   const siteIndexRef = useRef<SiteIndex>({ siteId, order: [], sections: {} });
   const fontLinkRef = useRef<HTMLLinkElement | null>(null);
@@ -192,6 +194,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) {
@@ -610,6 +614,7 @@ export default function EditorShell({
             setMediaSelectCallback(() => onSelect);
             setShowMediaLibrary(true);
           },
+          reportRejectedUploads: (files) => setRejectedUploads(files),
         }}>
         <div className="editor-shell relative">
           <EditorToolbar
@@ -634,7 +639,16 @@ export default function EditorShell({
             onOrderingClick={() => setShowOrderingModal(true)}
           />
 
-          <BugReportFAB siteId={siteId} />
+          <BugReportFAB />
+
+          {rejectedUploads.length > 0 && (
+            <div className="sticky top-2 z-30 mx-auto w-full max-w-3xl px-4">
+              <UploadRejectionAlert
+                message={formatRejections(rejectedUploads, siteConfig?.media.maxFileSize)}
+                onDismiss={() => setRejectedUploads([])}
+              />
+            </div>
+          )}
 
           <HistoryOrEditorContent sections={sections}>
             <EditorContent
@@ -885,9 +899,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/MediaLibraryContext.tsx

@@ -6,6 +6,7 @@ export interface MediaLibraryContextValue {
   openSelectModal: (onSelect: (imageId: string) => void) => void;
   uploadFile: (file: File) => void;
   uploadFileWithCallback: (file: File, onComplete: (imageId: string) => void) => string;
+  reportRejectedUploads: (files: { name: string; reason: "size" | "type" }[]) => void;
   manifest: MediaManifest;
   pendingItems: MediaItem[];
   pendingLocalUrls: Record<string, string>;

package/src/components/shell/MediaLibraryModal.tsx

@@ -2,9 +2,10 @@ import { useState, useRef, useCallback } from "react";
 import { Search, Upload, Trash2 } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Button } from "../shared/Button";
+import { UploadRejectionAlert } from "../shared/UploadRejectionAlert";
 import { Select } from "../shared/Select";
 import type { MediaItem, MediaKind } from "../../media/types";
-import { displayFilename, mimeToExt } from "../../media/utils";
+import { displayFilename, formatFileSize, mimeToExt } from "../../media/utils";
 
 export interface MediaLibraryModalProps {
   mode: "select" | "manage";
@@ -18,12 +19,6 @@ export interface MediaLibraryModalProps {
   maxFileSize?: number;
 }
 
-function formatFileSize(bytes: number): string {
-  if (bytes >= 1048576) return `${Math.round(bytes / 1048576)}MB`;
-  if (bytes >= 1024) return `${Math.round(bytes / 1024)}KB`;
-  return `${bytes}B`;
-}
-
 type KindFilter = "all" | MediaKind;
 
 function thumbnailSrc(item: MediaItem, localUrls: Record<string, string>): string {
@@ -231,18 +226,14 @@ export function MediaLibraryModal({
 
         {/* File size rejection alert */}
         {rejectedFiles.length > 0 && maxFileSize && (
-          <div className="flex flex-col items-center rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-amber-900/50 dark:bg-amber-950/30">
-            <p className="mb-2 text-center text-sm text-amber-800 lg:mb-0 lg:text-left dark:text-amber-200">
-              {rejectedFiles.length === 1
-                ? `"${rejectedFiles[0]}" exceeds`
-                : `${rejectedFiles.length} files exceed`} the {formatFileSize(maxFileSize)} file size limit.
-            </p>
-            <div className="flex shrink-0 items-center">
-              <Button variant="secondary" size="sm" onClick={() => setRejectedFiles([])}>
-                Dismiss
-              </Button>
-            </div>
-          </div>
+          <UploadRejectionAlert
+            message={
+              rejectedFiles.length === 1
+                ? `"${rejectedFiles[0]}" exceeds the ${formatFileSize(maxFileSize)} file size limit.`
+                : `${rejectedFiles.length} files exceed the ${formatFileSize(maxFileSize)} file size limit.`
+            }
+            onDismiss={() => setRejectedFiles([])}
+          />
         )}
       </div>
 

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/hooks/useMediaPipeline.ts

@@ -330,6 +330,9 @@ export function useMediaPipeline({
       });
       return blobUrl;
     },
+    reportRejectedUploads: () => {
+      // Placeholder — EditorShell overrides this with banner state.
+    },
     manifest: mediaManifest,
     pendingItems: pendingMediaItems,
     pendingLocalUrls: pendingLocalUrls,

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/media/utils.ts

@@ -54,3 +54,9 @@ export function displayFilename(originalName: string, mimeType: string): string
   if (originalName.endsWith(suffix)) return originalName;
   return `${originalName}${suffix}`;
 }
+
+export function formatFileSize(bytes: number): string {
+  if (bytes >= 1048576) return `${Math.round(bytes / 1048576)}MB`;
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)}KB`;
+  return `${bytes}B`;
+}

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()