upgrade ui, masonry layout

apps/gnocchi/hub/package.json

@@ -20,7 +20,7 @@
     "typecheck": "tsc --build tsconfig.json"
   },
   "dependencies": {
-    "@a-type/ui": "^1.0.14",
+    "@a-type/ui": "^1.1.3",
     "@a-type/utils": "^1.0.8",
     "@tiptap/core": "^2.2.4",
     "@tiptap/extension-document": "^2.2.4",

apps/gnocchi/web/package.json

@@ -14,7 +14,7 @@
     "typecheck": "tsc --build tsconfig.json"
   },
   "dependencies": {
-    "@a-type/ui": "^1.0.14",
+    "@a-type/ui": "^1.1.3",
     "@a-type/utils": "^1.0.8",
     "@biscuits/client": "workspace:*",
     "@biscuits/error": "workspace:*",

apps/gnocchi/web/src/components/recipes/collection/RecipeList.tsx

@@ -10,7 +10,7 @@ import {
 import { RecipeSearchBar } from '@/components/recipes/collection/RecipeSearchBar.jsx';
 import { useFeatureFlag } from '@biscuits/client';
 import { Button } from '@a-type/ui/components/button';
-import { CardGrid } from '@a-type/ui/components/card';
+import { CardGrid, cardGridColumns } from '@a-type/ui/components/card';
 import { InfiniteLoadTrigger } from '@a-type/ui/components/infiniteLoadTrigger';
 import { PageFixedArea } from '@a-type/ui/components/layouts';
 import { Spinner } from '@a-type/ui/components/spinner';
@@ -81,6 +81,11 @@ function RecipeListContent() {
           'grid-cols-1 sm:grid-cols-2': gridStyle === 'card-big',
           'grid-cols-2 sm:grid-cols-3': gridStyle === 'card-small',
         })}
+        columns={
+          gridStyle === 'card-big'
+            ? cardGridColumns.default
+            : cardGridColumns.small
+        }
       >
         {recipes.map((recipe) => (
           <RecipeListItem key={recipe.get('id')} recipe={recipe} />

apps/gnocchi/web/src/components/recipes/collection/RecipeListItem.tsx

@@ -21,7 +21,7 @@ import {
   DropdownMenuItemRightSlot,
   DropdownMenuTrigger,
 } from '@a-type/ui/components/dropdownMenu';
-import { Suspense, useCallback, useState } from 'react';
+import { Suspense, useCallback, useState, memo } from 'react';
 import { RecipeMainImageViewer } from '../viewer/RecipeMainImageViewer.jsx';
 import { RecipeTagsViewer } from '../viewer/RecipeTagsViewer.jsx';
 import { Icon } from '@a-type/ui/components/icon';
@@ -35,7 +35,7 @@ import cuid from 'cuid';
 
 const THREE_WEEKS_AGO = addWeeks(Date.now(), -3).getTime();
 
-export function RecipeListItem({
+export const RecipeListItem = memo(function RecipeListItem({
   recipe,
   className,
 }: {
@@ -111,7 +111,7 @@ export function RecipeListItem({
       </CardFooter>
     </CardRoot>
   );
-}
+});
 
 export function RecipePlaceholderItem({ className }: { className?: string }) {
   return <CardRoot className={className}>&nbsp;</CardRoot>;

apps/humding/web/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "1.0.14",
+    "@a-type/ui": "1.1.3",
     "@a-type/utils": "1.1.3",
     "@biscuits/client": "workspace:*",
     "@humding.biscuits/verdant": "workspace:*",

apps/marginalia/web/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "1.0.14",
+    "@a-type/ui": "1.1.3",
     "@a-type/utils": "1.1.0",
     "@biscuits/client": "workspace:*",
     "@marginalia.biscuits/verdant": "workspace:*",

apps/palette/web/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "1.0.14",
+    "@a-type/ui": "1.1.3",
     "@a-type/utils": "1.1.3",
     "@biscuits/client": "workspace:*",
     "@palette.biscuits/verdant": "workspace:*",

apps/star-chart/web/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "1.0.14",
+    "@a-type/ui": "1.1.3",
     "@a-type/utils": "1.1.2",
     "@biscuits/client": "workspace:*",
     "@react-spring/web": "^9.7.3",

apps/trip-tick/web/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "^1.0.14",
+    "@a-type/ui": "^1.1.3",
     "@a-type/utils": "^1.0.6",
     "@biscuits/client": "workspace:*",
     "@radix-ui/react-progress": "^1.0.3",

apps/wish-wash/hub/package.json

@@ -20,7 +20,7 @@
     "typecheck": "tsc --build tsconfig.json"
   },
   "dependencies": {
-    "@a-type/ui": "^1.0.14",
+    "@a-type/ui": "^1.1.3",
     "@a-type/utils": "^1.0.8",
     "@tiptap/core": "^2.2.4",
     "@tiptap/extension-document": "^2.2.4",

apps/wish-wash/web/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "1.0.14",
+    "@a-type/ui": "1.1.3",
     "@a-type/utils": "1.1.3",
     "@biscuits/client": "workspace:*",
     "@react-spring/web": "^9.7.3",

apps/wish-wash/web/src/components/lists/ListView.tsx

@@ -5,7 +5,7 @@ import { ListItem } from '../items/ListItem.jsx';
 import { clsx } from '@a-type/ui';
 import { ItemEditDialog } from '../items/ItemEditDialog.jsx';
 import { Suspense } from 'react';
-import { CardGrid } from '@a-type/ui/components/card';
+import { CardGrid, cardGridColumns } from '@a-type/ui/components/card';
 import { List } from '@wish-wash.biscuits/verdant';
 import { useSortedItems } from './hooks.js';
 
@@ -19,7 +19,7 @@ export function ListView({ list, className }: ListViewProps) {
 
   return (
     <div className={clsx('col items-stretch gap-4', className)}>
-      <CardGrid>
+      <CardGrid columns={cardGridColumns.default}>
         {items.map((item) => (
           <ListItem item={item} key={item.get('id')} />
         ))}

blog/package.json

@@ -10,7 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@a-type/ui": "^1.0.14",
+    "@a-type/ui": "^1.1.3",
     "@astrojs/check": "^0.5.10",
     "@astrojs/mdx": "^2.3.1",
     "@astrojs/rss": "^4.0.5",

packages/client/package.json

@@ -59,7 +59,7 @@
     "vite-plugin-pwa": "0.19.2"
   },
   "devDependencies": {
-    "@a-type/ui": "^1.0.14",
+    "@a-type/ui": "^1.1.3",
     "@types/react": "18.3.3",
     "@unocss/transformer-variant-group": "^0.58.0",
     "@verdant-web/react-router": "0.6.4",