love-ui 1.2.13 → 1.2.15

package/public/r/gantt-no-sidebar.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "gantt-no-sidebar",
-  "description": "Gantt chart focused on the timeline without sidebar.",
-  "registryDependencies": [
-    "@loveui/gantt",
-    "@faker-js/faker",
-    "lodash.groupby"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/gantt-no-sidebar.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\nimport groupBy from \"lodash.groupby\"\nimport { EyeIcon, LinkIcon, TrashIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  ContextMenu,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nimport {\n  GanttCreateMarkerTrigger,\n  GanttFeatureItem,\n  GanttFeatureList,\n  GanttFeatureListGroup,\n  GanttHeader,\n  GanttMarker,\n  GanttProvider,\n  GanttTimeline,\n  GanttToday,\n} from \"../../../../../packages/gantt\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Updated Planned\", color: \"#6B7280\" },\n  { id: faker.string.uuid(), name: \"Updated In Progress\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Updated Done\", color: \"#10B981\" },\n]\n\nconst users = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\nconst exampleGroups = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleProducts = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleInitiatives = Array.from({ length: 2 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleReleases = Array.from({ length: 3 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleFeatures = Array.from({ length: 20 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),\n    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),\n    status: faker.helpers.arrayElement(statuses),\n    owner: faker.helpers.arrayElement(users),\n    group: faker.helpers.arrayElement(exampleGroups),\n    product: faker.helpers.arrayElement(exampleProducts),\n    initiative: faker.helpers.arrayElement(exampleInitiatives),\n    release: faker.helpers.arrayElement(exampleReleases),\n  }))\n\nconst exampleMarkers = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    date: faker.date.past({ years: 0.5, refDate: new Date() }),\n    label: capitalize(faker.company.buzzPhrase()),\n    className: faker.helpers.arrayElement([\n      \"bg-blue-100 text-blue-900\",\n      \"bg-green-100 text-green-900\",\n      \"bg-purple-100 text-purple-900\",\n      \"bg-red-100 text-red-900\",\n      \"bg-orange-100 text-orange-900\",\n      \"bg-teal-100 text-teal-900\",\n    ]),\n  }))\n\nconst Example = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n  const groupedFeatures = groupBy(features, \"group.name\")\n  const sortedGroupedFeatures = Object.fromEntries(\n    Object.entries(groupedFeatures).sort(([nameA], [nameB]) =>\n      nameA.localeCompare(nameB)\n    )\n  )\n\n  const handleViewFeature = (id: string) =>\n    console.log(`Feature selected: ${id}`)\n\n  const handleCopyLink = (id: string) => console.log(`Copy link: ${id}`)\n\n  const handleRemoveFeature = (id: string) =>\n    setFeatures((prev) => prev.filter((feature) => feature.id !== id))\n\n  const handleRemoveMarker = (id: string) => console.log(`Remove marker: ${id}`)\n\n  const handleCreateMarker = (date: Date) =>\n    console.log(`Create marker: ${date.toISOString()}`)\n\n  const handleMoveFeature = (id: string, startAt: Date, endAt: Date | null) => {\n    if (!endAt) {\n      return\n    }\n\n    setFeatures((prev) =>\n      prev.map((feature) =>\n        feature.id === id ? { ...feature, startAt, endAt } : feature\n      )\n    )\n\n    console.log(`Move feature: ${id} from ${startAt} to ${endAt}`)\n  }\n\n  const handleAddFeature = (date: Date) =>\n    console.log(`Add feature: ${date.toISOString()}`)\n\n  return (\n    <GanttProvider\n      className=\"border\"\n      onAddItem={handleAddFeature}\n      range=\"monthly\"\n      zoom={100}\n    >\n      <GanttTimeline>\n        <GanttHeader />\n        <GanttFeatureList>\n          {Object.entries(sortedGroupedFeatures).map(([group, features]) => (\n            <GanttFeatureListGroup key={group}>\n              {features.map((feature) => (\n                <div className=\"flex\" key={feature.id}>\n                  <ContextMenu>\n                    <ContextMenuTrigger asChild>\n                      <button\n                        onClick={() => handleViewFeature(feature.id)}\n                        type=\"button\"\n                      >\n                        <GanttFeatureItem\n                          onMove={handleMoveFeature}\n                          {...feature}\n                        >\n                          <p className=\"flex-1 truncate text-xs\">\n                            {feature.name}\n                          </p>\n                          {feature.owner && (\n                            <Avatar className=\"h-4 w-4\">\n                              <AvatarImage src={feature.owner.image} />\n                              <AvatarFallback>\n                                {feature.owner.name?.slice(0, 2)}\n                              </AvatarFallback>\n                            </Avatar>\n                          )}\n                        </GanttFeatureItem>\n                      </button>\n                    </ContextMenuTrigger>\n                    <ContextMenuContent>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2\"\n                        onClick={() => handleViewFeature(feature.id)}\n                      >\n                        <EyeIcon className=\"text-muted-foreground\" size={16} />\n                        Updated View feature\n                      </ContextMenuItem>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2\"\n                        onClick={() => handleCopyLink(feature.id)}\n                      >\n                        <LinkIcon className=\"text-muted-foreground\" size={16} />\n                        Updated Copy link\n                      </ContextMenuItem>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2 text-destructive\"\n                        onClick={() => handleRemoveFeature(feature.id)}\n                      >\n                        <TrashIcon size={16} />\n                        Updated Remove from roadmap\n                      </ContextMenuItem>\n                    </ContextMenuContent>\n                  </ContextMenu>\n                </div>\n              ))}\n            </GanttFeatureListGroup>\n          ))}\n        </GanttFeatureList>\n        {exampleMarkers.map((marker) => (\n          <GanttMarker\n            key={marker.id}\n            {...marker}\n            onRemove={handleRemoveMarker}\n          />\n        ))}\n        <GanttToday />\n        <GanttCreateMarkerTrigger onCreateMarker={handleCreateMarker} />\n      </GanttTimeline>\n    </GanttProvider>\n  )\n}\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "gantt",
-    "project management"
-  ],
-  "type": "registry:example"
-}

package/public/r/gantt-read-only.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "gantt-read-only",
-  "description": "Read-only Gantt chart with markers and grouped features.",
-  "registryDependencies": [
-    "@loveui/gantt",
-    "@faker-js/faker",
-    "lodash.groupby"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/gantt-read-only.tsx",
-      "content": "\"use client\"\n\nimport { faker } from \"@faker-js/faker\"\nimport groupBy from \"lodash.groupby\"\n\nimport {\n  GanttFeatureItem,\n  GanttFeatureList,\n  GanttFeatureListGroup,\n  GanttHeader,\n  GanttMarker,\n  GanttProvider,\n  GanttSidebar,\n  GanttSidebarGroup,\n  GanttSidebarItem,\n  GanttTimeline,\n  GanttToday,\n} from \"../../../../../packages/gantt\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Updated Planned\", color: \"#6B7280\" },\n  { id: faker.string.uuid(), name: \"Updated In Progress\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Updated Done\", color: \"#10B981\" },\n]\n\nconst users = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\nconst exampleGroups = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleProducts = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleInitiatives = Array.from({ length: 2 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleReleases = Array.from({ length: 3 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleFeatures = Array.from({ length: 20 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),\n    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),\n    status: faker.helpers.arrayElement(statuses),\n    owner: faker.helpers.arrayElement(users),\n    group: faker.helpers.arrayElement(exampleGroups),\n    product: faker.helpers.arrayElement(exampleProducts),\n    initiative: faker.helpers.arrayElement(exampleInitiatives),\n    release: faker.helpers.arrayElement(exampleReleases),\n  }))\n\nconst exampleMarkers = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    date: faker.date.past({ years: 0.5, refDate: new Date() }),\n    label: capitalize(faker.company.buzzPhrase()),\n    className: faker.helpers.arrayElement([\n      \"bg-blue-100 text-blue-900\",\n      \"bg-green-100 text-green-900\",\n      \"bg-purple-100 text-purple-900\",\n      \"bg-red-100 text-red-900\",\n      \"bg-orange-100 text-orange-900\",\n      \"bg-teal-100 text-teal-900\",\n    ]),\n  }))\n\nconst Example = () => {\n  const groupedFeatures = groupBy(exampleFeatures, \"group.name\")\n\n  const sortedGroupedFeatures = Object.fromEntries(\n    Object.entries(groupedFeatures).sort(([nameA], [nameB]) =>\n      nameA.localeCompare(nameB)\n    )\n  )\n\n  return (\n    <GanttProvider className=\"border\" range=\"monthly\" zoom={100}>\n      <GanttSidebar>\n        {Object.entries(sortedGroupedFeatures).map(([group, features]) => (\n          <GanttSidebarGroup key={group} name={group}>\n            {features.map((feature) => (\n              <GanttSidebarItem feature={feature} key={feature.id} />\n            ))}\n          </GanttSidebarGroup>\n        ))}\n      </GanttSidebar>\n      <GanttTimeline>\n        <GanttHeader />\n        <GanttFeatureList>\n          {Object.entries(sortedGroupedFeatures).map(([group, features]) => (\n            <GanttFeatureListGroup key={group}>\n              {features.map((feature) => (\n                <div className=\"flex\" key={feature.id}>\n                  <GanttFeatureItem {...feature} />\n                </div>\n              ))}\n            </GanttFeatureListGroup>\n          ))}\n        </GanttFeatureList>\n        {exampleMarkers.map((marker) => (\n          <GanttMarker key={marker.id} {...marker} />\n        ))}\n        <GanttToday />\n      </GanttTimeline>\n    </GanttProvider>\n  )\n}\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "gantt",
-    "project management"
-  ],
-  "type": "registry:example"
-}

package/public/r/gantt.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "gantt",
-  "description": "Interactive Gantt chart with draggable features.",
-  "registryDependencies": [
-    "@loveui/gantt",
-    "@faker-js/faker",
-    "lodash.groupby"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/gantt.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\nimport groupBy from \"lodash.groupby\"\nimport { EyeIcon, LinkIcon, TrashIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  ContextMenu,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nimport {\n  GanttCreateMarkerTrigger,\n  GanttFeatureItem,\n  GanttFeatureList,\n  GanttFeatureListGroup,\n  GanttHeader,\n  GanttMarker,\n  GanttProvider,\n  GanttSidebar,\n  GanttSidebarGroup,\n  GanttSidebarItem,\n  GanttTimeline,\n  GanttToday,\n} from \"../../../../../packages/gantt\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Updated Planned\", color: \"#6B7280\" },\n  { id: faker.string.uuid(), name: \"Updated In Progress\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Updated Done\", color: \"#10B981\" },\n]\n\nconst users = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\nconst exampleGroups = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleProducts = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleInitiatives = Array.from({ length: 2 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleReleases = Array.from({ length: 3 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleFeatures = Array.from({ length: 20 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),\n    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),\n    status: faker.helpers.arrayElement(statuses),\n    owner: faker.helpers.arrayElement(users),\n    group: faker.helpers.arrayElement(exampleGroups),\n    product: faker.helpers.arrayElement(exampleProducts),\n    initiative: faker.helpers.arrayElement(exampleInitiatives),\n    release: faker.helpers.arrayElement(exampleReleases),\n  }))\n\nconst exampleMarkers = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    date: faker.date.past({ years: 0.5, refDate: new Date() }),\n    label: capitalize(faker.company.buzzPhrase()),\n    className: faker.helpers.arrayElement([\n      \"bg-blue-100 text-blue-900\",\n      \"bg-green-100 text-green-900\",\n      \"bg-purple-100 text-purple-900\",\n      \"bg-red-100 text-red-900\",\n      \"bg-orange-100 text-orange-900\",\n      \"bg-teal-100 text-teal-900\",\n    ]),\n  }))\n\nconst Example = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n  const groupedFeatures = groupBy(features, \"group.name\")\n  const sortedGroupedFeatures = Object.fromEntries(\n    Object.entries(groupedFeatures).sort(([nameA], [nameB]) =>\n      nameA.localeCompare(nameB)\n    )\n  )\n\n  const handleViewFeature = (id: string) =>\n    console.log(`Feature selected: ${id}`)\n\n  const handleCopyLink = (id: string) => console.log(`Copy link: ${id}`)\n\n  const handleRemoveFeature = (id: string) =>\n    setFeatures((prev) => prev.filter((feature) => feature.id !== id))\n\n  const handleRemoveMarker = (id: string) => console.log(`Remove marker: ${id}`)\n\n  const handleCreateMarker = (date: Date) =>\n    console.log(`Create marker: ${date.toISOString()}`)\n\n  const handleMoveFeature = (id: string, startAt: Date, endAt: Date | null) => {\n    if (!endAt) {\n      return\n    }\n\n    setFeatures((prev) =>\n      prev.map((feature) =>\n        feature.id === id ? { ...feature, startAt, endAt } : feature\n      )\n    )\n\n    console.log(`Move feature: ${id} from ${startAt} to ${endAt}`)\n  }\n\n  const handleAddFeature = (date: Date) =>\n    console.log(`Add feature: ${date.toISOString()}`)\n\n  return (\n    <GanttProvider\n      className=\"border\"\n      onAddItem={handleAddFeature}\n      range=\"monthly\"\n      zoom={100}\n    >\n      <GanttSidebar>\n        {Object.entries(sortedGroupedFeatures).map(([group, features]) => (\n          <GanttSidebarGroup key={group} name={group}>\n            {features.map((feature) => (\n              <GanttSidebarItem\n                feature={feature}\n                key={feature.id}\n                onSelectItem={handleViewFeature}\n              />\n            ))}\n          </GanttSidebarGroup>\n        ))}\n      </GanttSidebar>\n      <GanttTimeline>\n        <GanttHeader />\n        <GanttFeatureList>\n          {Object.entries(sortedGroupedFeatures).map(([group, features]) => (\n            <GanttFeatureListGroup key={group}>\n              {features.map((feature) => (\n                <div className=\"flex\" key={feature.id}>\n                  <ContextMenu>\n                    <ContextMenuTrigger asChild>\n                      <button\n                        onClick={() => handleViewFeature(feature.id)}\n                        type=\"button\"\n                      >\n                        <GanttFeatureItem\n                          onMove={handleMoveFeature}\n                          {...feature}\n                        >\n                          <p className=\"flex-1 truncate text-xs\">\n                            {feature.name}\n                          </p>\n                          {feature.owner && (\n                            <Avatar className=\"h-4 w-4\">\n                              <AvatarImage src={feature.owner.image} />\n                              <AvatarFallback>\n                                {feature.owner.name?.slice(0, 2)}\n                              </AvatarFallback>\n                            </Avatar>\n                          )}\n                        </GanttFeatureItem>\n                      </button>\n                    </ContextMenuTrigger>\n                    <ContextMenuContent>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2\"\n                        onClick={() => handleViewFeature(feature.id)}\n                      >\n                        <EyeIcon className=\"text-muted-foreground\" size={16} />\n                        Updated View feature\n                      </ContextMenuItem>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2\"\n                        onClick={() => handleCopyLink(feature.id)}\n                      >\n                        <LinkIcon className=\"text-muted-foreground\" size={16} />\n                        Updated Copy link\n                      </ContextMenuItem>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2 text-destructive\"\n                        onClick={() => handleRemoveFeature(feature.id)}\n                      >\n                        <TrashIcon size={16} />\n                        Updated Remove from roadmap\n                      </ContextMenuItem>\n                    </ContextMenuContent>\n                  </ContextMenu>\n                </div>\n              ))}\n            </GanttFeatureListGroup>\n          ))}\n        </GanttFeatureList>\n        {exampleMarkers.map((marker) => (\n          <GanttMarker\n            key={marker.id}\n            {...marker}\n            onRemove={handleRemoveMarker}\n          />\n        ))}\n        <GanttToday />\n        <GanttCreateMarkerTrigger onCreateMarker={handleCreateMarker} />\n      </GanttTimeline>\n    </GanttProvider>\n  )\n}\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "gantt",
-    "project management"
-  ],
-  "type": "registry:example"
-}

package/public/r/glimpse-custom.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "glimpse-custom",
-  "description": "Glimpse preview with custom surface styling.",
-  "registryDependencies": [
-    "@loveui/glimpse"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/glimpse-custom.tsx",
-      "content": "import {\n  Glimpse,\n  GlimpseContent,\n  GlimpseDescription,\n  GlimpseImage,\n  GlimpseTitle,\n  GlimpseTrigger,\n} from \"../../../../../packages/glimpse\"\nimport { glimpse } from \"../../../../../packages/glimpse/server\"\n\nconst Example = async () => {\n  const data = await glimpse(\"https://github.com/loveconnor/loveui\")\n\n  return (\n    <div>\n      Updated Check out{\" \"}\n      <Glimpse closeDelay={0} openDelay={0}>\n        <GlimpseTrigger asChild>\n          <a\n            className=\"font-medium text-primary underline\"\n            href=\"https://github.com/loveconnor/loveui\"\n          >\n            Updated LoveUI\n          </a>\n        </GlimpseTrigger>\n        <GlimpseContent className=\"w-80 bg-secondary\">\n          <GlimpseImage className=\"shadow-lg\" src={data.image ?? \"\"} />\n          <GlimpseTitle className=\"line-clamp-2 text-lg font-semibold\">\n            {data.title}\n          </GlimpseTitle>\n          <GlimpseDescription className=\"text-sm\">\n            {data.description}\n          </GlimpseDescription>\n        </GlimpseContent>\n      </Glimpse>{\" \"}\n      Updated on GitHub\n    </div>\n  )\n}\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "media",
-    "preview",
-    "customization"
-  ],
-  "type": "registry:example"
-}

package/public/r/glimpse.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "glimpse",
-  "description": "Link preview tooltip displaying fetched metadata.",
-  "registryDependencies": [
-    "@loveui/glimpse"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/glimpse.tsx",
-      "content": "import {\n  Glimpse,\n  GlimpseContent,\n  GlimpseDescription,\n  GlimpseImage,\n  GlimpseTitle,\n  GlimpseTrigger,\n} from \"../../../../../packages/glimpse\"\nimport { glimpse } from \"../../../../../packages/glimpse/server\"\n\nconst Example = async () => {\n  const data = await glimpse(\"https://github.com/loveconnor/loveui\")\n\n  return (\n    <div>\n      Updated Check out{\" \"}\n      <Glimpse closeDelay={0} openDelay={0}>\n        <GlimpseTrigger asChild>\n          <a\n            className=\"font-medium text-primary underline\"\n            href=\"https://github.com/loveconnor/loveui\"\n          >\n            Updated LoveUI\n          </a>\n        </GlimpseTrigger>\n        <GlimpseContent className=\"w-80\">\n          <GlimpseImage src={data.image ?? \"\"} />\n          <GlimpseTitle>{data.title}</GlimpseTitle>\n          <GlimpseDescription>{data.description}</GlimpseDescription>\n        </GlimpseContent>\n      </Glimpse>{\" \"}\n      Updated on GitHub\n    </div>\n  )\n}\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "media",
-    "preview"
-  ],
-  "type": "registry:example"
-}

package/public/r/gooey-toast-demo.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "gooey-toast-demo",
-  "description": "Basic gooey toast",
-  "registryDependencies": [
-    "@loveui/gooey-toast",
-    "@loveui/select",
-    "@loveui/button"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/gooey-toast-demo.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { gooey, type GooeyPosition } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function GooeyToastDemo() {\n  const [position, setPosition] = useState<GooeyPosition>(\"top-right\")\n\n  const positions: GooeyPosition[] = [\n    \"top-left\",\n    \"top-center\",\n    \"top-right\",\n    \"bottom-left\",\n    \"bottom-center\",\n    \"bottom-right\",\n  ]\n\n  const showToast = (\n    type: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\"\n  ) => {\n    const toasts = {\n      default: {\n        title: \"Updated Event has been created\",\n        description: \"Updated Monday, January 3rd at 6:00pm\",\n      },\n      success: {\n        title: \"Updated Success!\",\n        description: \"Updated Your changes have been saved successfully.\",\n      },\n      error: {\n        title: \"Updated Error occurred\",\n        description: \"Updated Failed to save your changes. Please try again.\",\n      },\n      warning: {\n        title: \"Updated Warning\",\n        description: \"Updated Your session will expire in 5 minutes.\",\n      },\n      info: {\n        title: \"Updated New feature available\",\n        description: \"Updated Check out the new gooey toast component!\",\n      },\n    }\n\n    const config = toasts[type]\n\n    if (type === \"default\") {\n      gooey.show({ ...config, position })\n    } else {\n      gooey[type]({ ...config, position })\n    }\n  }\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex items-center gap-2\">\n        <label htmlFor=\"position\" className=\"text-sm font-medium\">\n          Updated Position:\n        </label>\n        <Select\n          value={position}\n          onValueChange={(v) => setPosition(v as GooeyPosition)}\n        >\n          <SelectTrigger id=\"position\" className=\"w-[180px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {positions.map((pos) => (\n              <SelectItem key={pos} value={pos}>\n                {pos}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div className=\"flex flex-wrap gap-2\">\n        <Button variant=\"outline\" onClick={() => showToast(\"default\")}>\n          Updated Default\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"success\")}>\n          Updated Success\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"error\")}>\n          Updated Error\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"warning\")}>\n          Updated Warning\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"info\")}>\n          Updated Info\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "gooey-toast",
-    "button",
-    "select"
-  ],
-  "type": "registry:example"
-}

package/public/r/gooey-toast-position.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "gooey-toast-position",
-  "description": "Control toast position",
-  "registryDependencies": [
-    "@loveui/gooey-toast"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/gooey-toast-position.tsx",
-      "content": "\"use client\"\n\nimport { gooey, type GooeyPosition } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function GooeyToastPosition() {\n  const positions: GooeyPosition[] = [\n    \"top-left\",\n    \"top-center\",\n    \"top-right\",\n    \"bottom-left\",\n    \"bottom-center\",\n    \"bottom-right\",\n  ]\n\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      {positions.map((position) => (\n        <Button\n          key={position}\n          variant=\"outline\"\n          onClick={() => {\n            gooey.show({\n              title: position,\n              description: `Toast shown at ${position}`,\n              position,\n            })\n          }}\n        >\n          {position}\n        </Button>\n      ))}\n    </div>\n  )\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "gooey-toast",
-    "button"
-  ],
-  "type": "registry:example"
-}

package/public/r/gooey-toast-promise.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "gooey-toast-promise",
-  "description": "Drive gooey toasts from promise states",
-  "registryDependencies": [
-    "@loveui/gooey-toast"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/gooey-toast-promise.tsx",
-      "content": "\"use client\"\n\nimport { gooey } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function GooeyToastPromise() {\n  const handlePromise = () => {\n    const promise = new Promise<{ name: string }>((resolve) => {\n      setTimeout(() => resolve({ name: \"Updated User\" }), 2000)\n    })\n\n    gooey.promise(promise, {\n      loading: { title: \"Updated Loading...\" },\n      success: (data) => ({\n        title: \"Updated Success!\",\n        description: `Welcome back, ${data.name}!`,\n      }),\n      error: {\n        title: \"Updated Error\",\n        description: \"Updated Failed to load data.\",\n      },\n    })\n  }\n\n  return (\n    <Button variant=\"outline\" onClick={handlePromise}>\n      Updated Load Data\n    </Button>\n  )\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "gooey-toast",
-    "button"
-  ],
-  "type": "registry:example"
-}

package/public/r/gooey-toast-states.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "gooey-toast-states",
-  "description": "Gooey toast with different states",
-  "registryDependencies": [
-    "@loveui/gooey-toast"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/gooey-toast-states.tsx",
-      "content": "\"use client\"\n\nimport { gooey } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function GooeyToastStates() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.success({\n            title: \"Updated Success!\",\n            description: \"Updated Your changes have been saved.\",\n          })\n        }}\n      >\n        Updated Success\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.error({\n            title: \"Updated Error\",\n            description: \"Updated Something went wrong. Please try again.\",\n          })\n        }}\n      >\n        Updated Error\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.warning({\n            title: \"Updated Warning\",\n            description: \"Updated This action cannot be undone.\",\n          })\n        }}\n      >\n        Updated Warning\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.info({\n            title: \"Updated Did you know?\",\n            description: \"Updated You can customize toast animations.\",\n          })\n        }}\n      >\n        Updated Info\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.action({\n            title: \"Updated Action Required\",\n            description: \"Updated Please review your settings.\",\n          })\n        }}\n      >\n        Updated Action\n      </Button>\n    </div>\n  )\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "gooey-toast",
-    "button"
-  ],
-  "type": "registry:example"
-}

package/public/r/gooey-toast-with-button.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "gooey-toast-with-button",
-  "description": "Gooey toast with an action button",
-  "registryDependencies": [
-    "@loveui/gooey-toast"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/gooey-toast-with-button.tsx",
-      "content": "\"use client\"\n\nimport { gooey } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function GooeyToastWithButton() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        const id = gooey.action({\n          title: \"Updated File deleted\",\n          description: \"Updated Your file has been moved to trash.\",\n          button: {\n            title: \"Updated Undo\",\n            onClick: () => {\n              gooey.dismiss(id)\n              gooey.success({\n                title: \"Updated Restored\",\n                description: \"Updated Your file has been restored.\",\n              })\n            },\n          },\n        })\n      }}\n    >\n      Updated Delete File\n    </Button>\n  )\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "gooey-toast",
-    "button"
-  ],
-  "type": "registry:example"
-}

package/public/r/gradient-blinds.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "gradient-blinds",
-  "dependencies": [
-    "ogl"
-  ],
-  "files": [
-    {
-      "path": "registry/default/ui/gradient-blinds.tsx",
-      "content": "\"use client\"\n\nimport React, { useEffect, useRef } from \"react\"\nimport { Mesh, Program, Renderer, Triangle } from \"ogl\"\n\nexport interface GradientBlindsProps {\n  className?: string\n  dpr?: number\n  paused?: boolean\n  gradientColors?: string[]\n  angle?: number\n  noise?: number\n  blindCount?: number\n  blindMinWidth?: number\n  mouseDampening?: number\n  mirrorGradient?: boolean\n  spotlightRadius?: number\n  spotlightSoftness?: number\n  spotlightOpacity?: number\n  distortAmount?: number\n  shineDirection?: \"left\" | \"right\"\n  mixBlendMode?: string\n}\n\nconst MAX_COLORS = 8\nconst hexToRGB = (hex: string): [number, number, number] => {\n  const c = hex.replace(\"#\", \"\").padEnd(6, \"0\")\n  const r = parseInt(c.slice(0, 2), 16) / 255\n  const g = parseInt(c.slice(2, 4), 16) / 255\n  const b = parseInt(c.slice(4, 6), 16) / 255\n  return [r, g, b]\n}\nconst prepStops = (stops?: string[]) => {\n  const base = (stops && stops.length ? stops : [\"#FF9FFC\", \"#5227FF\"]).slice(\n    0,\n    MAX_COLORS\n  )\n  if (base.length === 1) base.push(base[0]!)\n  while (base.length < MAX_COLORS) base.push(base[base.length - 1]!)\n  const arr: [number, number, number][] = []\n  for (let i = 0; i < MAX_COLORS; i++) arr.push(hexToRGB(base[i]!))\n  const count = Math.max(2, Math.min(MAX_COLORS, stops?.length ?? 2))\n  return { arr, count }\n}\n\nconst GradientBlinds: React.FC<GradientBlindsProps> = ({\n  className,\n  dpr,\n  paused = false,\n  gradientColors,\n  angle = 0,\n  noise = 0.3,\n  blindCount = 16,\n  blindMinWidth = 60,\n  mouseDampening = 0.15,\n  mirrorGradient = false,\n  spotlightRadius = 0.5,\n  spotlightSoftness = 1,\n  spotlightOpacity = 1,\n  distortAmount = 0,\n  shineDirection = \"left\",\n  mixBlendMode = \"normal\",\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const rafRef = useRef<number | null>(null)\n  const programRef = useRef<Program | null>(null)\n  const meshRef = useRef<Mesh<Triangle> | null>(null)\n  const geometryRef = useRef<Triangle | null>(null)\n  const rendererRef = useRef<Renderer | null>(null)\n  const mouseTargetRef = useRef<[number, number]>([0, 0])\n  const lastTimeRef = useRef<number>(0)\n  const firstResizeRef = useRef<boolean>(true)\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    const renderer = new Renderer({\n      dpr:\n        dpr ??\n        (typeof window !== \"undefined\" ? window.devicePixelRatio || 1 : 1),\n      alpha: true,\n      antialias: true,\n    })\n    rendererRef.current = renderer\n    const gl = renderer.gl\n    const canvas = gl.canvas as HTMLCanvasElement\n\n    canvas.style.width = \"100%\"\n    canvas.style.height = \"100%\"\n    canvas.style.display = \"block\"\n    container.appendChild(canvas)\n\n    const vertex = `\nattribute vec2 position;\nattribute vec2 uv;\nvarying vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n`\n\n    const fragment = `\n#ifdef GL_ES\nprecision mediump float;\n#endif\n\nuniform vec3  iResolution;\nuniform vec2  iMouse;\nuniform float iTime;\n\nuniform float uAngle;\nuniform float uNoise;\nuniform float uBlindCount;\nuniform float uSpotlightRadius;\nuniform float uSpotlightSoftness;\nuniform float uSpotlightOpacity;\nuniform float uMirror;\nuniform float uDistort;\nuniform float uShineFlip;\nuniform vec3  uColor0;\nuniform vec3  uColor1;\nuniform vec3  uColor2;\nuniform vec3  uColor3;\nuniform vec3  uColor4;\nuniform vec3  uColor5;\nuniform vec3  uColor6;\nuniform vec3  uColor7;\nuniform int   uColorCount;\n\nvarying vec2 vUv;\n\nfloat rand(vec2 co){\n  return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453);\n}\n\nvec2 rotate2D(vec2 p, float a){\n  float c = cos(a);\n  float s = sin(a);\n  return mat2(c, -s, s, c) * p;\n}\n\nvec3 getGradientColor(float t){\n  float tt = clamp(t, 0.0, 1.0);\n  int count = uColorCount;\n  if (count < 2) count = 2;\n  float scaled = tt * float(count - 1);\n  float seg = floor(scaled);\n  float f = fract(scaled);\n\n  if (seg < 1.0) return mix(uColor0, uColor1, f);\n  if (seg < 2.0 && count > 2) return mix(uColor1, uColor2, f);\n  if (seg < 3.0 && count > 3) return mix(uColor2, uColor3, f);\n  if (seg < 4.0 && count > 4) return mix(uColor3, uColor4, f);\n  if (seg < 5.0 && count > 5) return mix(uColor4, uColor5, f);\n  if (seg < 6.0 && count > 6) return mix(uColor5, uColor6, f);\n  if (seg < 7.0 && count > 7) return mix(uColor6, uColor7, f);\n  if (count > 7) return uColor7;\n  if (count > 6) return uColor6;\n  if (count > 5) return uColor5;\n  if (count > 4) return uColor4;\n  if (count > 3) return uColor3;\n  if (count > 2) return uColor2;\n  return uColor1;\n}\n\nvoid mainImage( out vec4 fragColor, in vec2 fragCoord )\n{\n    vec2 uv0 = fragCoord.xy / iResolution.xy;\n\n    float aspect = iResolution.x / iResolution.y;\n    vec2 p = uv0 * 2.0 - 1.0;\n    p.x *= aspect;\n    vec2 pr = rotate2D(p, uAngle);\n    pr.x /= aspect;\n    vec2 uv = pr * 0.5 + 0.5;\n\n    vec2 uvMod = uv;\n    if (uDistort > 0.0) {\n      float a = uvMod.y * 6.0;\n      float b = uvMod.x * 6.0;\n      float w = 0.01 * uDistort;\n      uvMod.x += sin(a) * w;\n      uvMod.y += cos(b) * w;\n    }\n    float t = uvMod.x;\n    if (uMirror > 0.5) {\n      t = 1.0 - abs(1.0 - 2.0 * fract(t));\n    }\n    vec3 base = getGradientColor(t);\n\n    vec2 offset = vec2(iMouse.x/iResolution.x, iMouse.y/iResolution.y);\n  float d = length(uv0 - offset);\n  float r = max(uSpotlightRadius, 1e-4);\n  float dn = d / r;\n  float spot = (1.0 - 2.0 * pow(dn, uSpotlightSoftness)) * uSpotlightOpacity;\n  vec3 cir = vec3(spot);\n  float stripe = fract(uvMod.x * max(uBlindCount, 1.0));\n  if (uShineFlip > 0.5) stripe = 1.0 - stripe;\n    vec3 ran = vec3(stripe);\n\n    vec3 col = cir + base - ran;\n    col += (rand(gl_FragCoord.xy + iTime) - 0.5) * uNoise;\n\n    fragColor = vec4(col, 1.0);\n}\n\nvoid main() {\n    vec4 color;\n    mainImage(color, vUv * iResolution.xy);\n    gl_FragColor = color;\n}\n`\n\n    const { arr: colorArr, count: colorCount } = prepStops(gradientColors)\n    const uniforms: {\n      iResolution: { value: [number, number, number] }\n      iMouse: { value: [number, number] }\n      iTime: { value: number }\n      uAngle: { value: number }\n      uNoise: { value: number }\n      uBlindCount: { value: number }\n      uSpotlightRadius: { value: number }\n      uSpotlightSoftness: { value: number }\n      uSpotlightOpacity: { value: number }\n      uMirror: { value: number }\n      uDistort: { value: number }\n      uShineFlip: { value: number }\n      uColor0: { value: [number, number, number] }\n      uColor1: { value: [number, number, number] }\n      uColor2: { value: [number, number, number] }\n      uColor3: { value: [number, number, number] }\n      uColor4: { value: [number, number, number] }\n      uColor5: { value: [number, number, number] }\n      uColor6: { value: [number, number, number] }\n      uColor7: { value: [number, number, number] }\n      uColorCount: { value: number }\n    } = {\n      iResolution: {\n        value: [gl.drawingBufferWidth, gl.drawingBufferHeight, 1],\n      },\n      iMouse: { value: [0, 0] },\n      iTime: { value: 0 },\n      uAngle: { value: (angle * Math.PI) / 180 },\n      uNoise: { value: noise },\n      uBlindCount: { value: Math.max(1, blindCount) },\n      uSpotlightRadius: { value: spotlightRadius },\n      uSpotlightSoftness: { value: spotlightSoftness },\n      uSpotlightOpacity: { value: spotlightOpacity },\n      uMirror: { value: mirrorGradient ? 1 : 0 },\n      uDistort: { value: distortAmount },\n      uShineFlip: { value: shineDirection === \"right\" ? 1 : 0 },\n      uColor0: { value: colorArr[0]! },\n      uColor1: { value: colorArr[1]! },\n      uColor2: { value: colorArr[2]! },\n      uColor3: { value: colorArr[3]! },\n      uColor4: { value: colorArr[4]! },\n      uColor5: { value: colorArr[5]! },\n      uColor6: { value: colorArr[6]! },\n      uColor7: { value: colorArr[7]! },\n      uColorCount: { value: colorCount },\n    }\n\n    const program = new Program(gl, {\n      vertex,\n      fragment,\n      uniforms,\n    })\n    programRef.current = program\n\n    const geometry = new Triangle(gl)\n    geometryRef.current = geometry\n    const mesh = new Mesh(gl, { geometry, program })\n    meshRef.current = mesh\n\n    const resize = () => {\n      const rect = container.getBoundingClientRect()\n      renderer.setSize(rect.width, rect.height)\n      uniforms.iResolution.value = [\n        gl.drawingBufferWidth,\n        gl.drawingBufferHeight,\n        1,\n      ]\n\n      if (blindMinWidth && blindMinWidth > 0) {\n        const maxByMinWidth = Math.max(\n          1,\n          Math.floor(rect.width / blindMinWidth)\n        )\n\n        const effective = blindCount\n          ? Math.min(blindCount, maxByMinWidth)\n          : maxByMinWidth\n        uniforms.uBlindCount.value = Math.max(1, effective)\n      } else {\n        uniforms.uBlindCount.value = Math.max(1, blindCount)\n      }\n\n      if (firstResizeRef.current) {\n        firstResizeRef.current = false\n        const cx = gl.drawingBufferWidth / 2\n        const cy = gl.drawingBufferHeight / 2\n        uniforms.iMouse.value = [cx, cy]\n        mouseTargetRef.current = [cx, cy]\n      }\n    }\n\n    resize()\n    const ro = new ResizeObserver(resize)\n    ro.observe(container)\n\n    const onPointerMove = (e: PointerEvent) => {\n      const rect = canvas.getBoundingClientRect()\n      const scale = (renderer as unknown as { dpr?: number }).dpr || 1\n      const x = (e.clientX - rect.left) * scale\n      const y = (rect.height - (e.clientY - rect.top)) * scale\n      mouseTargetRef.current = [x, y]\n      if (mouseDampening <= 0) {\n        uniforms.iMouse.value = [x, y]\n      }\n    }\n    canvas.addEventListener(\"pointermove\", onPointerMove)\n\n    const loop = (t: number) => {\n      rafRef.current = requestAnimationFrame(loop)\n      uniforms.iTime.value = t * 0.001\n      if (mouseDampening > 0) {\n        if (!lastTimeRef.current) lastTimeRef.current = t\n        const dt = (t - lastTimeRef.current) / 1000\n        lastTimeRef.current = t\n        const tau = Math.max(1e-4, mouseDampening)\n        let factor = 1 - Math.exp(-dt / tau)\n        if (factor > 1) factor = 1\n        const target = mouseTargetRef.current\n        const cur = uniforms.iMouse.value\n        cur[0] += (target[0] - cur[0]) * factor\n        cur[1] += (target[1] - cur[1]) * factor\n      } else {\n        lastTimeRef.current = t\n      }\n      if (!paused && programRef.current && meshRef.current) {\n        try {\n          renderer.render({ scene: meshRef.current })\n        } catch (e) {\n          console.error(e)\n        }\n      }\n    }\n    rafRef.current = requestAnimationFrame(loop)\n\n    return () => {\n      if (rafRef.current) cancelAnimationFrame(rafRef.current)\n      canvas.removeEventListener(\"pointermove\", onPointerMove)\n      ro.disconnect()\n      if (canvas.parentElement === container) {\n        container.removeChild(canvas)\n      }\n      const callIfFn = <T extends object, K extends keyof T>(\n        obj: T | null,\n        key: K\n      ) => {\n        if (obj && typeof obj[key] === \"function\") {\n          ;(obj[key] as unknown as () => void).call(obj)\n        }\n      }\n      callIfFn(programRef.current, \"remove\")\n      callIfFn(geometryRef.current, \"remove\")\n      callIfFn(meshRef.current as unknown as { remove?: () => void }, \"remove\")\n      callIfFn(\n        rendererRef.current as unknown as { destroy?: () => void },\n        \"destroy\"\n      )\n      programRef.current = null\n      geometryRef.current = null\n      meshRef.current = null\n      rendererRef.current = null\n    }\n  }, [\n    dpr,\n    paused,\n    gradientColors,\n    angle,\n    noise,\n    blindCount,\n    blindMinWidth,\n    mouseDampening,\n    mirrorGradient,\n    spotlightRadius,\n    spotlightSoftness,\n    spotlightOpacity,\n    distortAmount,\n    shineDirection,\n  ])\n\n  return (\n    <div\n      ref={containerRef}\n      className={`relative h-full w-full overflow-hidden ${className}`}\n      style={{\n        ...(mixBlendMode && {\n          mixBlendMode: mixBlendMode as React.CSSProperties[\"mixBlendMode\"],\n        }),\n      }}\n    />\n  )\n}\n\nexport default GradientBlinds\n",
-      "type": "registry:ui"
-    }
-  ],
-  "type": "registry:ui"
-}

package/public/r/group-demo.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "group-demo",
-  "description": "Group example",
-  "registryDependencies": [
-    "@loveui/group",
-    "@loveui/button"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/group-demo.tsx",
-      "content": "import { EllipsisIcon, FilesIcon, FilmIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Group, GroupItem, GroupSeparator } from \"@/registry/default/ui/group\"\n\nexport default function GroupDemo() {\n  return (\n    <Group>\n      <GroupItem render={<Button variant=\"outline\" />}>\n        <FilesIcon />\n        Updated Files\n      </GroupItem>\n      <GroupSeparator />\n      <GroupItem render={<Button variant=\"outline\" />}>\n        <FilmIcon />\n        Updated Media\n      </GroupItem>\n      <GroupSeparator />\n      <GroupItem\n        render={\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Updated Menu\" />\n        }\n      >\n        <EllipsisIcon />\n      </GroupItem>\n    </Group>\n  )\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "group"
-  ],
-  "type": "registry:example"
-}

package/public/r/group-with-input.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "group-with-input",
-  "description": "Group with input",
-  "registryDependencies": [
-    "@loveui/group",
-    "@loveui/button",
-    "@loveui/input"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/group-with-input.tsx",
-      "content": "import { CopyIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Group, GroupItem, GroupSeparator } from \"@/registry/default/ui/group\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nexport default function GroupWithInput() {\n  return (\n    <Group>\n      <GroupItem\n        render={<Input type=\"text\" defaultValue=\"https://loveui.dev\" />}\n      />\n      <GroupSeparator />\n      <GroupItem\n        render={\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Updated Copy\" />\n        }\n      >\n        <CopyIcon />\n      </GroupItem>\n    </Group>\n  )\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "group"
-  ],
-  "type": "registry:example"
-}

package/public/r/group.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "group",
-  "dependencies": [
-    "@base-ui-components/react"
-  ],
-  "registryDependencies": [
-    "@loveui/separator"
-  ],
-  "files": [
-    {
-      "path": "registry/default/ui/group.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui-components/react/merge-props\"\nimport { useRender } from \"@base-ui-components/react/use-render\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nfunction Group({\n  className,\n  children,\n  ...props\n}: {\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"group\"\n      className={cn(\n        \"flex w-fit [--clip-end:-1rem] [--clip-start:-1rem] *:pointer-coarse:after:min-w-auto\",\n        className\n      )}\n      role=\"group\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction GroupItem({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const defaultProps = {\n    className: cn(\n      \"border-x-0 not-first:rounded-s-none not-last:rounded-e-none before:[clip-path:inset(-1rem_var(--clip-end)_-1rem_var(--clip-start))] not-first:before:-start-0.5 not-first:before:rounded-s-none not-first:before:[--clip-start:2px] not-last:before:-end-0.5 not-last:before:rounded-e-none not-last:before:[--clip-end:2px] first:border-s last:border-e focus-visible:z-10 has-focus-visible:z-10 not-last:has-[+[data-slot=separator]]:before:[--clip-end:1.5px] [[data-slot=separator]+&]:before:[--clip-start:1.5px]\",\n      className\n    ),\n  }\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps(defaultProps, props),\n  })\n}\n\nfunction GroupSeparator({ className, ...props }: { className?: string }) {\n  return (\n    <Separator\n      orientation=\"vertical\"\n      className={cn(\n        \"relative z-20 has-[+[data-slot=input-control]:focus-within,+[data-slot=field-control]:focus-within,+[data-slot=select-trigger]:focus-visible+*]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=field-control]:focus-within,+[data-slot=select-trigger]:focus-visible+*]:bg-ring [[data-slot=input-control]:focus-within+&,[data-slot=field-control]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&]:-translate-x-px [[data-slot=input-control]:focus-within+&,[data-slot=field-control]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&]:bg-ring\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Group, GroupItem, GroupSeparator }\n",
-      "type": "registry:ui"
-    }
-  ],
-  "type": "registry:ui"
-}

package/public/r/hero.json

@@ -1,24 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "hero",
-  "description": "A hero section with announcement, headline, and video player.",
-  "registryDependencies": [
-    "@loveui/announcement",
-    "@loveui/marquee",
-    "@loveui/video-player",
-    "@loveui/button"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/hero.tsx",
-      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport {\n  SiApple,\n  SiFacebook,\n  SiGithub,\n  SiGoogle,\n  SiInstagram,\n  SiX,\n  SiYoutube,\n} from \"@icons-pack/react-simple-icons\"\n\nimport {\n  Announcement,\n  AnnouncementTag,\n  AnnouncementTitle,\n} from \"../../../../../packages/announcement\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeFade,\n  MarqueeItem,\n} from \"../../../../../packages/marquee\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\nimport {\n  VideoPlayer,\n  VideoPlayerContent,\n  VideoPlayerControlBar,\n  VideoPlayerMuteButton,\n  VideoPlayerPlayButton,\n  VideoPlayerSeekBackwardButton,\n  VideoPlayerSeekForwardButton,\n  VideoPlayerTimeDisplay,\n  VideoPlayerTimeRange,\n  VideoPlayerVolumeRange,\n} from \"../../../../../packages/video-player\"\n\nconst logos = [\n  {\n    name: \"Updated GitHub\",\n    icon: SiGithub,\n    url: \"https://github.com\",\n  },\n  {\n    name: \"Updated Facebook\",\n    icon: SiFacebook,\n    url: \"https://facebook.com\",\n  },\n  {\n    name: \"Updated Google\",\n    icon: SiGoogle,\n    url: \"https://google.com\",\n  },\n  {\n    name: \"Updated X\",\n    icon: SiX,\n    url: \"https://x.com\",\n  },\n  {\n    name: \"Updated Apple\",\n    icon: SiApple,\n    url: \"https://apple.com\",\n  },\n  {\n    name: \"Updated Instagram\",\n    icon: SiInstagram,\n    url: \"https://instagram.com\",\n  },\n  {\n    name: \"Updated YouTube\",\n    icon: SiYoutube,\n    url: \"https://youtube.com\",\n  },\n]\n\nconst Example = () => (\n  <div className=\"flex flex-col gap-16 px-8 py-24 text-center\">\n    <div className=\"flex flex-col items-center justify-center gap-8\">\n      <Link href=\"#\">\n        <Announcement>\n          <AnnouncementTag>Updated Latest</AnnouncementTag>\n          <AnnouncementTitle>\n            Updated Introducing blocks by LoveUI\n          </AnnouncementTitle>\n        </Announcement>\n      </Link>\n      <h1 className=\"mb-0 text-6xl font-medium text-balance md:text-7xl xl:text-[5.25rem]\">\n        Updated The best way to build your website\n      </h1>\n      <p className=\"mt-0 mb-0 text-lg text-balance text-muted-foreground\">\n        Updated LoveUI blocks are a new way to build your website. They are a\n        collection of pre-built components that you can use to build your\n        website.\n      </p>\n      <div className=\"flex items-center gap-2\">\n        <Button render={<Link href=\"#\" />}>Updated Get started</Button>\n        <Button render={<Link href=\"#\" />} variant=\"outline\">\n          Updated Learn more\n        </Button>\n      </div>\n    </div>\n    <section className=\"flex flex-col items-center justify-center gap-8 rounded-xl bg-secondary py-8 pb-18\">\n      <p className=\"mb-0 font-medium text-balance text-muted-foreground\">\n        Updated Trusted by developers from leading companies\n      </p>\n      <div className=\"flex size-full items-center justify-center\">\n        <Marquee>\n          <MarqueeFade className=\"from-secondary\" side=\"left\" />\n          <MarqueeFade className=\"from-secondary\" side=\"right\" />\n          <MarqueeContent pauseOnHover={false}>\n            {logos.map((logo) => (\n              <MarqueeItem className=\"mx-16 size-12\" key={logo.name}>\n                <Link href={logo.url}>\n                  <logo.icon className=\"size-full\" />\n                </Link>\n              </MarqueeItem>\n            ))}\n          </MarqueeContent>\n        </Marquee>\n      </div>\n    </section>\n    <VideoPlayer className=\"overflow-hidden rounded-lg border\">\n      <VideoPlayerContent\n        crossOrigin=\"\"\n        muted\n        preload=\"auto\"\n        slot=\"media\"\n        src=\"https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4\"\n      />\n      <VideoPlayerControlBar>\n        <VideoPlayerPlayButton />\n        <VideoPlayerSeekBackwardButton />\n        <VideoPlayerSeekForwardButton />\n        <VideoPlayerTimeRange />\n        <VideoPlayerTimeDisplay showDuration />\n        <VideoPlayerMuteButton />\n        <VideoPlayerVolumeRange />\n      </VideoPlayerControlBar>\n    </VideoPlayer>\n  </div>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "blocks",
-    "hero",
-    "marketing"
-  ],
-  "type": "registry:example"
-}

package/public/r/hover-card.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "hover-card",
-  "type": "registry:ui",
-  "dependencies": [
-    "radix-ui"
-  ],
-  "files": [
-    {
-      "path": "registry/default/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  showArrow = false,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content> & {\n  showArrow?: boolean\n}) {\n  return (\n    <HoverCardPrimitive.Content\n      data-slot=\"hover-card-content\"\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        className\n      )}\n      {...props}\n    >\n      {props.children}\n      {showArrow && (\n        <HoverCardPrimitive.Arrow className=\"-my-px fill-popover drop-shadow-[0_1px_0_var(--border)]\" />\n      )}\n    </HoverCardPrimitive.Content>\n  )\n}\n\nexport { HoverCard, HoverCardContent, HoverCardTrigger }\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/public/r/image-crop-circular.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "image-crop-circular",
-  "description": "Circular avatar cropper using the image crop component.",
-  "registryDependencies": [
-    "@loveui/image-crop",
-    "@loveui/button",
-    "@loveui/input"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/image-crop-circular.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\nimport { XIcon } from \"lucide-react\"\n\nimport {\n  ImageCrop,\n  ImageCropApply,\n  ImageCropContent,\n  ImageCropReset,\n} from \"../../../../../packages/image-crop\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst STOCK_IMAGES = [\n  {\n    label: \"Updated Portrait\",\n    url: \"https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=1200&q=80\",\n  },\n  {\n    label: \"Updated Designer\",\n    url: \"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?auto=format&fit=crop&w=1200&q=80\",\n  },\n  {\n    label: \"Updated Developer\",\n    url: \"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=1200&q=80\",\n  },\n]\n\nconst getFileFromUrl = async (url: string, filename: string) => {\n  const response = await fetch(url)\n  if (!response.ok) {\n    throw new Error(\"Failed to fetch image\")\n  }\n\n  const blob = await response.blob()\n  const extension = blob.type.split(\"/\").at(-1) || \"jpg\"\n\n  return new File([blob], `${filename}.${extension}`, {\n    type: blob.type || \"image/jpeg\",\n  })\n}\n\nconst Example = () => {\n  const [selectedFile, setSelectedFile] = useState<File | null>(null)\n  const [croppedImage, setCroppedImage] = useState<string | null>(null)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [reloadKey, setReloadKey] = useState(0)\n  const [isLoading, setIsLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n    const activeImage = STOCK_IMAGES[activeIndex]\n\n    const load = async () => {\n      setIsLoading(true)\n      setError(null)\n      setSelectedFile(null)\n\n      try {\n        const file = await getFileFromUrl(\n          activeImage.url,\n          activeImage.label.toLowerCase().replace(/\\s+/g, \"-\")\n        )\n\n        if (!cancelled) {\n          setSelectedFile(file)\n          setCroppedImage(null)\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(\n            err instanceof Error ? err.message : \"Unable to load stock image.\"\n          )\n        }\n      } finally {\n        if (!cancelled) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    void load()\n\n    return () => {\n      cancelled = true\n    }\n  }, [activeIndex, reloadKey])\n\n  const handleReload = () => {\n    setReloadKey((key) => key + 1)\n  }\n\n  const handleReset = () => {\n    setCroppedImage(null)\n  }\n\n  const handleRetry = () => {\n    handleReload()\n  }\n\n  if (croppedImage) {\n    return (\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-wrap gap-2\">\n          {STOCK_IMAGES.map((image, index) => (\n            <Button\n              key={image.label}\n              onClick={() => setActiveIndex(index)}\n              size=\"sm\"\n              variant={index === activeIndex ? \"default\" : \"outline\"}\n            >\n              {image.label}\n            </Button>\n          ))}\n        </div>\n        <Image\n          alt=\"Updated Cropped\"\n          className=\"overflow-hidden rounded-full\"\n          height={180}\n          src={croppedImage}\n          unoptimized\n          width={180}\n        />\n        <div className=\"flex gap-2\">\n          <Button\n            onClick={handleReset}\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Updated Crop again\n          </Button>\n          <Button\n            onClick={() =>\n              setActiveIndex((index) => (index + 1) % STOCK_IMAGES.length)\n            }\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Updated Use another portrait\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-2\">\n        {STOCK_IMAGES.map((image, index) => (\n          <Button\n            key={image.label}\n            disabled={isLoading && index === activeIndex}\n            onClick={() => setActiveIndex(index)}\n            size=\"sm\"\n            variant={index === activeIndex ? \"default\" : \"outline\"}\n          >\n            {image.label}\n          </Button>\n        ))}\n      </div>\n\n      {isLoading && (\n        <div className=\"h-52 w-full max-w-md animate-pulse rounded-full bg-muted\" />\n      )}\n\n      {error && (\n        <div className=\"flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive\">\n          <span>{error}</span>\n          <Button onClick={handleRetry} size=\"sm\" variant=\"ghost\">\n            Updated Retry\n          </Button>\n        </div>\n      )}\n\n      {!selectedFile && !isLoading && !error && (\n        <p className=\"text-sm text-muted-foreground\">\n          Updated Pick a portrait above to load the cropper.\n        </p>\n      )}\n\n      {selectedFile && !croppedImage && !isLoading && (\n        <ImageCrop\n          key={selectedFile?.name ?? \"stock-portrait\"}\n          aspect={1}\n          circularCrop\n          file={selectedFile}\n          maxImageSize={1024 * 1024} // 1MB\n          onChange={console.log}\n          onComplete={console.log}\n          onCrop={setCroppedImage}\n        >\n          <ImageCropContent className=\"max-w-md\" />\n          <div className=\"flex items-center gap-2\">\n            <ImageCropApply />\n            <ImageCropReset />\n            <Button\n              onClick={handleReload}\n              size=\"icon\"\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <XIcon className=\"size-4\" />\n            </Button>\n          </div>\n        </ImageCrop>\n      )}\n    </div>\n  )\n}\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "media",
-    "image",
-    "crop"
-  ],
-  "type": "registry:example"
-}

package/public/r/image-crop-custom.json

@@ -1,24 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "image-crop-custom",
-  "description": "Image cropper with custom action buttons.",
-  "registryDependencies": [
-    "@loveui/image-crop",
-    "@loveui/button",
-    "@loveui/input"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/image-crop-custom.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  ImageCrop,\n  ImageCropApply,\n  ImageCropContent,\n  ImageCropReset,\n} from \"../../../../../packages/image-crop\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst STOCK_IMAGES = [\n  {\n    label: \"Updated Coffee shop\",\n    url: \"https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1400&q=80\",\n  },\n  {\n    label: \"Updated Workspace\",\n    url: \"https://images.unsplash.com/photo-1474631245212-32dc3c8310c6?auto=format&fit=crop&w=1400&q=80\",\n  },\n  {\n    label: \"Updated Outdoor cafe\",\n    url: \"https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1400&q=80\",\n  },\n]\n\nconst getFileFromUrl = async (url: string, filename: string) => {\n  const response = await fetch(url)\n  if (!response.ok) {\n    throw new Error(\"Failed to fetch image\")\n  }\n\n  const blob = await response.blob()\n  const extension = blob.type.split(\"/\").at(-1) || \"jpg\"\n\n  return new File([blob], `${filename}.${extension}`, {\n    type: blob.type || \"image/jpeg\",\n  })\n}\n\nconst Example = () => {\n  const [selectedFile, setSelectedFile] = useState<File | null>(null)\n  const [croppedImage, setCroppedImage] = useState<string | null>(null)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [reloadKey, setReloadKey] = useState(0)\n  const [isLoading, setIsLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n    const activeImage = STOCK_IMAGES[activeIndex]\n\n    const load = async () => {\n      setIsLoading(true)\n      setError(null)\n      setSelectedFile(null)\n\n      try {\n        const file = await getFileFromUrl(\n          activeImage.url,\n          activeImage.label.toLowerCase().replace(/\\s+/g, \"-\")\n        )\n\n        if (!cancelled) {\n          setSelectedFile(file)\n          setCroppedImage(null)\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(\n            err instanceof Error ? err.message : \"Unable to load stock image.\"\n          )\n        }\n      } finally {\n        if (!cancelled) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    void load()\n\n    return () => {\n      cancelled = true\n    }\n  }, [activeIndex, reloadKey])\n\n  const handleReload = () => {\n    setReloadKey((key) => key + 1)\n  }\n\n  const handleReset = () => {\n    setCroppedImage(null)\n  }\n\n  const handleRetry = () => {\n    handleReload()\n  }\n\n  if (croppedImage) {\n    return (\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-wrap gap-2\">\n          {STOCK_IMAGES.map((image, index) => (\n            <Button\n              key={image.label}\n              onClick={() => setActiveIndex(index)}\n              size=\"sm\"\n              variant={index === activeIndex ? \"default\" : \"outline\"}\n            >\n              {image.label}\n            </Button>\n          ))}\n        </div>\n        <Image\n          alt=\"Updated Cropped\"\n          className=\"rounded-lg border\"\n          height={200}\n          src={croppedImage}\n          unoptimized\n          width={200}\n        />\n        <Button onClick={handleReset} size=\"sm\" type=\"button\" variant=\"outline\">\n          Updated Start Over\n        </Button>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-2\">\n        {STOCK_IMAGES.map((image, index) => (\n          <Button\n            key={image.label}\n            disabled={isLoading && index === activeIndex}\n            onClick={() => setActiveIndex(index)}\n            size=\"sm\"\n            variant={index === activeIndex ? \"default\" : \"outline\"}\n          >\n            {image.label}\n          </Button>\n        ))}\n      </div>\n\n      {isLoading && (\n        <div className=\"h-52 w-full max-w-md animate-pulse rounded-lg bg-muted\" />\n      )}\n\n      {error && (\n        <div className=\"flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive\">\n          <span>{error}</span>\n          <Button onClick={handleRetry} size=\"sm\" variant=\"ghost\">\n            Updated Retry\n          </Button>\n        </div>\n      )}\n\n      {!selectedFile && !isLoading && !error && (\n        <p className=\"text-sm text-muted-foreground\">\n          Updated Choose a preset photo above to explore custom actions.\n        </p>\n      )}\n\n      {selectedFile && !croppedImage && !isLoading && (\n        <ImageCrop\n          key={selectedFile?.name ?? \"stock-custom\"}\n          aspect={1}\n          file={selectedFile}\n          maxImageSize={1024 * 1024} // 1MB\n          onChange={console.log}\n          onComplete={console.log}\n          onCrop={setCroppedImage}\n        >\n          <ImageCropContent className=\"max-w-md\" />\n          <div className=\"flex items-center gap-2\">\n            <ImageCropApply asChild>\n              <Button size=\"sm\" variant=\"outline\">\n                Updated Apply Crop\n              </Button>\n            </ImageCropApply>\n            <ImageCropReset asChild>\n              <Button size=\"sm\" variant=\"outline\">\n                Updated Reset\n              </Button>\n            </ImageCropReset>\n            <Button\n              onClick={handleReload}\n              size=\"sm\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              Updated Load another photo\n            </Button>\n          </div>\n        </ImageCrop>\n      )}\n    </div>\n  )\n}\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "media",
-    "image",
-    "crop",
-    "customization"
-  ],
-  "type": "registry:example"
-}

package/public/r/image-crop.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "image-crop",
-  "description": "Image cropper with upload, crop, and reset controls.",
-  "registryDependencies": [
-    "@loveui/image-crop",
-    "@loveui/button",
-    "@loveui/input"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/image-crop.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\nimport { XIcon } from \"lucide-react\"\n\nimport {\n  ImageCrop,\n  ImageCropApply,\n  ImageCropContent,\n  ImageCropReset,\n} from \"../../../../../packages/image-crop\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst STOCK_IMAGES = [\n  {\n    label: \"Updated Mountain sunrise\",\n    url: \"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80\",\n  },\n  {\n    label: \"Updated City skyline\",\n    url: \"https://images.unsplash.com/photo-1467269204594-9661b134dd2b?auto=format&fit=crop&w=1600&q=80\",\n  },\n  {\n    label: \"Updated Foggy forest\",\n    url: \"https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1600&q=80\",\n  },\n]\n\nconst getFileFromUrl = async (url: string, filename: string) => {\n  const response = await fetch(url)\n  if (!response.ok) {\n    throw new Error(\"Failed to fetch image\")\n  }\n\n  const blob = await response.blob()\n  const extension = blob.type.split(\"/\").at(-1) || \"jpg\"\n\n  return new File([blob], `${filename}.${extension}`, {\n    type: blob.type || \"image/jpeg\",\n  })\n}\n\nconst Example = () => {\n  const [selectedFile, setSelectedFile] = useState<File | null>(null)\n  const [croppedImage, setCroppedImage] = useState<string | null>(null)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [reloadKey, setReloadKey] = useState(0)\n  const [isLoading, setIsLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n    const activeImage = STOCK_IMAGES[activeIndex]\n\n    const load = async () => {\n      setIsLoading(true)\n      setError(null)\n      setSelectedFile(null)\n\n      try {\n        const file = await getFileFromUrl(\n          activeImage.url,\n          activeImage.label.toLowerCase().replace(/\\s+/g, \"-\")\n        )\n\n        if (!cancelled) {\n          setSelectedFile(file)\n          setCroppedImage(null)\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(\n            err instanceof Error ? err.message : \"Unable to load stock image.\"\n          )\n        }\n      } finally {\n        if (!cancelled) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    void load()\n\n    return () => {\n      cancelled = true\n    }\n  }, [activeIndex, reloadKey])\n\n  const handleReload = () => {\n    setReloadKey((key) => key + 1)\n  }\n\n  const handleReset = () => {\n    setCroppedImage(null)\n  }\n\n  const handleRetry = () => {\n    handleReload()\n  }\n\n  if (croppedImage) {\n    return (\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-wrap gap-2\">\n          {STOCK_IMAGES.map((image, index) => (\n            <Button\n              key={image.label}\n              onClick={() => setActiveIndex(index)}\n              size=\"sm\"\n              variant={index === activeIndex ? \"default\" : \"outline\"}\n            >\n              {image.label}\n            </Button>\n          ))}\n        </div>\n        <Image\n          alt=\"Updated Cropped\"\n          height={180}\n          src={croppedImage}\n          unoptimized\n          width={180}\n        />\n        <div className=\"flex items-center gap-2\">\n          <Button\n            onClick={handleReset}\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Updated Crop again\n          </Button>\n          <Button\n            onClick={() =>\n              setActiveIndex((index) => (index + 1) % STOCK_IMAGES.length)\n            }\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Updated Use another photo\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-2\">\n        {STOCK_IMAGES.map((image, index) => (\n          <Button\n            key={image.label}\n            disabled={isLoading && index === activeIndex}\n            onClick={() => setActiveIndex(index)}\n            size=\"sm\"\n            variant={index === activeIndex ? \"default\" : \"outline\"}\n          >\n            {image.label}\n          </Button>\n        ))}\n      </div>\n\n      {isLoading && (\n        <div className=\"h-52 w-full max-w-md animate-pulse rounded-lg bg-muted\" />\n      )}\n\n      {error && (\n        <div className=\"flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive\">\n          <span>{error}</span>\n          <Button onClick={handleRetry} size=\"sm\" variant=\"ghost\">\n            Updated Retry\n          </Button>\n        </div>\n      )}\n\n      {!selectedFile && !isLoading && !error && (\n        <p className=\"text-sm text-muted-foreground\">\n          Updated Select an image above to start cropping.\n        </p>\n      )}\n\n      {selectedFile && !croppedImage && !isLoading && (\n        <ImageCrop\n          key={selectedFile?.name ?? \"stock-image\"}\n          aspect={1}\n          file={selectedFile}\n          maxImageSize={1024 * 1024} // 1MB\n          onChange={console.log}\n          onComplete={console.log}\n          onCrop={setCroppedImage}\n        >\n          <ImageCropContent className=\"max-w-md\" />\n          <div className=\"flex items-center gap-2\">\n            <ImageCropApply />\n            <ImageCropReset />\n            <Button\n              onClick={handleReload}\n              size=\"icon\"\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <XIcon className=\"size-4\" />\n            </Button>\n          </div>\n        </ImageCrop>\n      )}\n    </div>\n  )\n}\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "media",
-    "image",
-    "crop"
-  ],
-  "type": "registry:example"
-}

package/public/r/image-zoom-background.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "image-zoom-background",
-  "description": "Image zoom with custom modal backdrop styling.",
-  "registryDependencies": [
-    "@loveui/image-zoom"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/image-zoom-background.tsx",
-      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { ImageZoom } from \"../../../../../packages/image-zoom\"\n\nconst Example = () => (\n  <ImageZoom\n    backdropClassName={cn(\n      '[&_[data-rmiz-modal-overlay=\"visible\"]]:bg-black/80'\n    )}\n  >\n    <Image\n      alt=\"Updated Placeholder image\"\n      className=\"h-auto w-96\"\n      height={800}\n      src=\"https://placehold.co/1200x800\"\n      unoptimized\n      width={1200}\n    />\n  </ImageZoom>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "media",
-    "image",
-    "zoom",
-    "customization"
-  ],
-  "type": "registry:example"
-}