uifolio 0.6.0 → 0.7.1

package/README.md

@@ -14,6 +14,7 @@ and the alias is rewritten automatically.
 # from any project, through the npm package
 npx uifolio@latest add calendar --color "#10B981" --radius 6
 pnpm dlx uifolio@latest add video-player otp
+pnpm dlx uifolio@latest add horizontal-accordion storytelling
 
 # from the root of the project that contains UIfolio
 npm run uifolio -- list
@@ -31,19 +32,43 @@ node cli/uifolio.mjs add file-upload --alias "#lib" --dry-run   # simulate
 | `uifolio init` | writes `uifolio.json` (dir, lib, alias) in the target project |
 | `uifolio add <names...>` | copies the component **+ transitive dependencies** (helpers `@/lib/*`) |
 
-Options: `--cwd <dir>`, `--dir <path>` (default `src/components/ui`), `--lib <path>` (default `src/lib`), `--alias <alias>` (default `@`), `--page <path>` (created if missing), `--interactive` (force the questions), `--force` (overwrite), `--dry-run` (simulate), `--color <hex>` and `--radius <px>`.
+Options: `--cwd <dir>`, `--dir <path>` (default `src/components/ui`), `--animations <path>` (default `src/components/animations`), `--lib <path>` (default `src/lib`), `--alias <alias>` (default `@`), `--page <path>` (created if missing), `--interactive` (force the questions), `--force` (overwrite), `--dry-run` (simulate), `--color <hex>` and `--radius <px>`.
 
-`add` does not stop at the copy. The components always land in
-`src/components/ui` (override with `--dir`) and the page imports them through
-the `@/` alias. Without `--page`, the CLI asks where to use them:
+`add` does not stop at the copy. The components land in
+`src/components/ui` (override with `--dir`), the animations in
+`src/components/animations` (override with `--animations`), and the page imports
+them through the `@/` alias. Without `--page`, the CLI asks where to use them:
 
-1. *Do you already have a file ready to receive the component (…component…) (y/N) ?* `yes` → *In which file should the component (…component…) be copied (e.g. src/pages/calendar.tsx) ?*: the import and a ready-to-render example are added without duplication, and the file is created when missing;
+1. *Do you already have a file ready to receive the component (…component…) (y/N) ?* `yes` → *In which file should the component (…component…) be copied (e.g. src/pages/calendar.tsx) ?*: the import and a ready-to-render usage are added without duplication, and the file is created when missing. When the file already exists, the CLI also asks *At which line should the component (…component…) start (the content on that line moves after it) ?* (an empty answer keeps the automatic placement);
 2. `no` → *Would you like to create a new folder and an import file (Y/n) ?* `yes` → *Please specify the new path (e.g. src/pages/calendar.tsx) ?*: the folder and the file are created; `no` → install only, no file is touched.
 
-The example is a small component (`<CalendarExample />` plus its definition)
-that carries the data and props each component needs (items for `Stories` and
-`CommandMenu`, a source for the players, children for the resizable panels…),
-so the component is visible immediately instead of an empty `<Component />`.
+The usage is written **inside the page's own component**, not in a separate
+`<CalendarExample />` helper: the element, its props and the state or data it
+needs (items for `Stories` and `CommandMenu`, a source for the players,
+children for the resizable panels…) are inlined where the component is added,
+so it is visible immediately instead of an empty `<Component />`. The state and
+data go at the top of the component body, before its `return`.
+
+```tsx
+'use client'
+
+import { useState } from 'react'
+import { Choice } from '@/components/ui/choice'
+
+export default function Home() {
+  const [checked, setChecked] = useState(true)
+  return (
+    <main>
+      <Choice
+        checked={checked}
+        onChange={setChecked}
+        label="Email alerts"
+        description="Get a summary every week."
+      />
+    </main>
+  )
+}
+```
 
 Answering `-` to a path question installs the component without creating or
 modifying any page.
@@ -114,6 +139,14 @@ only marks the installation as complete when that is relevant.
 | OtpInput | `src/components/ui/otp-input.tsx` | 4 fields, paste, rotate + success check |
 | ColorPicker | `src/components/ui/color-picker.tsx` | advanced panel, saturation/lightness, hue, alpha, eyedropper, RGB channels, presets, HEX/RGB/HSL/RGBA |
 | Table | `src/components/ui/table.tsx` | shadcn-style typed table, uniform `px-4` cells and a wider gap before Actions, select-all checkbox, row actions |
+| HorizontalAccordion | `src/components/animations/horizontal-accordion.tsx` | theme-colored panels, hover, click, arrow/Home/End keyboard |
+| Storytelling | `src/components/animations/horizontal-story.tsx` | vertical scroll driven horizontal story, palettes, mobile touch fallback |
+| StackingCards | `src/components/animations/stacking-cards.tsx` | cards settle on scroll, customizable gradients or solid color |
+| ScrollText | `src/components/animations/scroll-text.tsx` | letters light up with their viewport position, reversible |
+| ImageCrossfade | `src/components/animations/image-crossfade.tsx` | pinned crossfading images, captions, dots and customizable overlay |
+
+The animation helpers (`data.ts`, `palette.ts`, `animation-settings-*`, `palette-*`)
+are copied automatically when the installed animation needs them.
 
 Copyable helpers (the CLI follows them automatically): `src/lib/utils.ts`,
 `src/lib/video.ts`, `src/lib/vtt.ts`, `src/lib/date.ts`, `src/lib/uploader.ts`, `src/lib/color.ts`,