Address PR review: hydration fix, type safety, accessibility

  - Fix hydration mismatch: use useEffect + isLoaded flag to defer
    version-dependent rendering until client has loaded localStorage
  - Fix type: replace any[] with A2UIComponent[] for v0.9 defaults
  - Fix accessibility: make role/tabIndex conditional on onClick
  - Add license header to pnpm-lock.yaml for CI check

Author: lukasmoschitz

tools/composer/pnpm-lock.yaml

@@ -194,7 +194,7 @@ function ComponentContent({ component, specVersion }: { component: ComponentDoc;
 }
 
 export default function ComponentsPage() {
-  const { specVersion } = useSpecVersion();
+  const { specVersion, isLoaded } = useSpecVersion();
   const componentsData = specVersion === '0.9' ? COMPONENTS_DATA_V09 : COMPONENTS_DATA;
   const [selectedComponent, setSelectedComponent] = useState('Row');
 
@@ -210,7 +210,7 @@ export default function ComponentsPage() {
         onSelect={setSelectedComponent}
         data={componentsData}
       />
-      {component && <ComponentContent component={component} specVersion={specVersion} />}
+      {isLoaded && component && <ComponentContent component={component} specVersion={specVersion} />}
     </div>
   );
 }

tools/composer/src/app/components/page.tsx

@@ -29,7 +29,7 @@ export default function GalleryPage() {
   const [selectedWidget, setSelectedWidget] = useState<Widget | null>(null);
   const { addWidget } = useWidgets();
   const router = useRouter();
-  const { specVersion } = useSpecVersion();
+  const { specVersion, isLoaded } = useSpecVersion();
 
   const galleryWidgets = specVersion === '0.9' ? V09_GALLERY_WIDGETS : V08_GALLERY_WIDGETS;
 
@@ -57,7 +57,7 @@ export default function GalleryPage() {
     <div className="flex-1 overflow-auto p-6">
       <h1 className="mb-6 text-2xl font-semibold">Gallery</h1>
       <div className="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5" style={{ columnWidth: '308px' }}>
-        {galleryWidgets.map((item) => (
+        {!isLoaded ? null : galleryWidgets.map((item) => (
           <div key={item.widget.id} className="mb-4 break-inside-avoid">
             <GalleryWidget
               widget={item.widget}

tools/composer/src/app/gallery/page.tsx

@@ -31,11 +31,11 @@ export function GalleryWidget({ widget, height = 200, onClick }: GalleryWidgetPr
 
   return (
     <div
-      role="button"
-      tabIndex={0}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
       onClick={onClick}
-      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClick?.(); }}
-      className="w-full text-left rounded-xl border border-white bg-white/80 p-4 shadow-sm transition-all hover:shadow-md hover:border-muted-foreground/30 cursor-pointer overflow-hidden"
+      onKeyDown={(e) => { if (onClick && (e.key === 'Enter' || e.key === ' ')) onClick(); }}
+      className={`w-full text-left rounded-xl border border-white bg-white/80 p-4 shadow-sm transition-all hover:shadow-md hover:border-muted-foreground/30 overflow-hidden ${onClick ? 'cursor-pointer' : ''}`}
       style={{ minHeight: height }}
     >
       <div className="flex flex-col gap-2 h-full">

tools/composer/src/components/gallery/gallery-widget.tsx

@@ -51,8 +51,7 @@ const DEFAULT_COMPONENTS_V08: A2UIComponent[] = [
   },
 ];
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const DEFAULT_COMPONENTS_V09: any[] = [
+const DEFAULT_COMPONENTS_V09: A2UIComponent[] = [
   {
     id: "root",
     component: "Card",

tools/composer/src/components/main/create-widget.tsx

@@ -20,6 +20,10 @@
  * Controls which version (v0.8 or v0.9) the entire composer uses for
  * rendering, gallery samples, component docs, and new widget creation.
  * Persisted to localStorage.
+ *
+ * Uses useEffect to load from localStorage after hydration to avoid
+ * server/client mismatch. The `isLoaded` flag lets consumers defer
+ * version-dependent rendering until the client value is available.
  */
 'use client';
 
@@ -32,19 +36,22 @@ const DEFAULT_VERSION: SpecVersion = '0.9';
 interface SpecVersionContextValue {
   specVersion: SpecVersion;
   setSpecVersion: (version: SpecVersion) => void;
+  isLoaded: boolean;
 }
 
 const SpecVersionContext = createContext<SpecVersionContextValue | null>(null);
 
 export function SpecVersionProvider({ children }: { children: ReactNode }) {
   const [specVersion, setSpecVersionState] = useState<SpecVersion>(DEFAULT_VERSION);
+  const [isLoaded, setIsLoaded] = useState(false);
 
-  // Load from localStorage on mount
+  // Load from localStorage after hydration
   useEffect(() => {
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored === '0.8' || stored === '0.9') {
       setSpecVersionState(stored);
     }
+    setIsLoaded(true);
   }, []);
 
   const setSpecVersion = useCallback((version: SpecVersion) => {
@@ -53,7 +60,7 @@ export function SpecVersionProvider({ children }: { children: ReactNode }) {
   }, []);
 
   return (
-    <SpecVersionContext.Provider value={{ specVersion, setSpecVersion }}>
+    <SpecVersionContext.Provider value={{ specVersion, setSpecVersion, isLoaded }}>
       {children}
     </SpecVersionContext.Provider>
   );