prismify-ui 0.1.0-alpha.1

package/llms.txt

@@ -0,0 +1,220 @@
+# prismify-ui
+
+> Vue 3 UI component library for admin interfaces: **SCSS-only** styles in SFCs, design tokens as **`--pf-*`** CSS variables on `:root`, **no Tailwind** in the library. Works with **plain Vue 3** and **Nuxt 4**. MIT. Published as **`prismify-ui`** on npm. **No Reka UI** — components are custom-built.
+
+**Repository:** https://github.com/koirodev/prismify-ui
+
+**Raw docs base (default branch `main`):** `https://raw.githubusercontent.com/koirodev/prismify-ui/main/`
+
+---
+
+## Installation (Vue & Nuxt)
+
+- [Installation and usage](https://raw.githubusercontent.com/koirodev/prismify-ui/main/docs/installation.md): Install from npm, peer dependencies, **`prismifyPlugin`**, import **`prismify-ui/style.css`**, **`PfApp`** shell, tree-shaking imports, Nuxt 4 **`css`** + plugin setup.
+
+---
+
+## Getting started
+
+- [README](https://raw.githubusercontent.com/koirodev/prismify-ui/main/README.md): Package overview, peer summary, documentation links.
+- [Documentation index](https://raw.githubusercontent.com/koirodev/prismify-ui/main/docs/README.md): Entry point for **`docs/`**.
+- [Theming and design tokens](https://raw.githubusercontent.com/koirodev/prismify-ui/main/docs/theming.md): Overriding **`--pf-*`**, color/typography/layout tables, **`PfHeader`** / **`PfMain`**, input/switch/slider/select tokens, animation, SCSS entry **`prismify-ui/styles`**.
+- [Library development](https://raw.githubusercontent.com/koirodev/prismify-ui/main/docs/library-development.md): Storybook categories, build, tests, icons pipeline, semver and alpha releases.
+
+---
+
+## Conventions (for contributors and AI)
+
+- **Component prefix:** **`Pf*`** (e.g. **`PfButton`**). Register globally via **`app.use(prismifyPlugin)`** or named imports from **`prismify-ui`**.
+- **Styles:** Single-file components use **`lang="scss"`** only; do not add Tailwind or other CSS frameworks inside library components.
+- **Theming:** Use **`var(--pf-*)`**; token sources live in **`src/styles/variables/*`**, aggregated in **`src/styles/_variables.scss`**. Do not use **`$pf-*`** SCSS variables for consumer theming.
+- **BEM (scoped):** Block name = camelCase without **`Pf`** (**`PfButton`** → **`pfButton`**). Pattern **`block__element_modifier`** (one **`_`** before a modifier).
+- **Icons:** **`PfIcon`** — **`name`** ∈ **`PfIconName`** / **`PF_ICON_NAMES`** (glyphs from **`src/icons/svg/`**); **`size`** ∈ **`PfIconSize`** / **`PF_ICON_SIZES`** / **`--pf-icon-size-*`**.
+- **Storybook:** Stories as **`*.stories.ts`**, title **`'<Category>/<PfComponent>'`** (see **`docs/library-development.md`**).
+- **Build:** Library **`vite.lib.config.ts`**; peers listed in **`rollupOptions.external`** (Vue, vue-router, `@internationalized/*`, `@tanstack/vue-table`, TipTap is bundled as configured — verify **`package.json`**).
+
+---
+
+## Components (source folders on GitHub)
+
+Each line links to the component folder (**`tree/main/...`**). Implementation details are in **`index.vue`** inside that folder. Storybook: **`npm run storybook`** in the repo.
+
+### Element
+
+- [PfAlert](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfAlert): Inline or block alert with optional avatar, actions, and dismiss.
+- [PfAvatar](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfAvatar): Circular avatar with image, fallback, and size variants.
+- [PfAvatarGroup](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfAvatarGroup): Stacked overlapping avatars with overflow indicator.
+- [PfBadge](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfBadge): Small status or count badge on inline content.
+- [PfBanner](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfBanner): Dismissible top-of-page or section banner.
+- [PfButton](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfButton): Primary UI button with variants, sizes, icons, loading.
+- [PfCard](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfCard): Card container with slots for header, body, footer.
+- [PfChip](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfChip): Compact chip or pill for tags and filters.
+- [PfCollapsible](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfCollapsible): Expand/collapse region with trigger.
+- [PfContentSearchButton](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfContentSearchButton): Button styled to open documentation-style content search.
+- [PfFieldGroup](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfFieldGroup): Groups button-like or field-adjacent controls in a row.
+- [PfIcon](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfIcon): Inline SVG icons from the built-in glyph set.
+- [PfKbd](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfKbd): Keyboard shortcut display using **`usePfKbd`** / **`PF_KBD_GLYPHS`**.
+- [PfProgress](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfProgress): Horizontal or vertical progress indicator.
+- [PfSeparator](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfSeparator): Visual divider between regions.
+- [PfSkeleton](https://github.com/koirodev/prismify-ui/tree/main/src/components/element/PfSkeleton): Loading placeholder blocks.
+
+### Form
+
+- [PfCalendar](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfCalendar): Calendar grid for date/range selection (**peer:** `@internationalized/date`). Locale from **`PfApp`** if not set.
+- [PfCheckbox](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfCheckbox): Single checkbox with optional card variant.
+- [PfCheckboxGroup](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfCheckboxGroup): Group of related checkboxes.
+- [PfColorPicker](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfColorPicker): Color selection UI.
+- [PfFileUpload](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfFileUpload): File dropzone and file list with remove.
+- [PfForm](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfForm): Form wrapper with submit/validate integration.
+- [PfFormField](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfFormField): Label, hint, and error layout for inputs.
+- [PfInput](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfInput): Text input with overlay styling and optional **`animatedText`** character animation (**`--pf-input-char-*`**).
+- [PfTextarea](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfTextarea): Multiline input with similar overlay/animation patterns as **`PfInput`**.
+- [PfInputDate](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfInputDate): Date field combining input and calendar UX.
+- [PfInputTime](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfInputTime): Time selection input.
+- [PfInputNumber](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfInputNumber): Numeric input with steppers (**peer:** `@internationalized/number`).
+- [PfInputMenu](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfInputMenu): Autocomplete-style input with suggestion list.
+- [PfInputTags](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfInputTags): Token/tag input field.
+- [PfPinInput](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfPinInput): OTP-style multi-cell input.
+- [PfRadio](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfRadio): Single radio control with card variant support.
+- [PfRadioGroup](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfRadioGroup): Radio group for one-of-many choice.
+- [PfSelect](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfSelect): Custom select with Teleport panel, native/options/multiple modes, **`usePfVModelBound`** pattern.
+- [PfSelectMenu](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfSelectMenu): Searchable list select for rich options.
+- [PfSlider](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfSlider): Range slider with optional built-in tooltip (**`--pf-slider-*`**).
+- [PfSwitch](https://github.com/koirodev/prismify-ui/tree/main/src/components/form/PfSwitch): Toggle switch (**`--pf-switch-*`**).
+
+### Layout
+
+- [PfApp](https://github.com/koirodev/prismify-ui/tree/main/src/components/layout/PfApp): Root app provider: **`locale`**, **`dir`**, portal targets, toaster, tooltip provider; **`PfCalendar`** reads locale from here.
+- [PfContainer](https://github.com/koirodev/prismify-ui/tree/main/src/components/layout/PfContainer): Max-width content container with responsive padding.
+- [PfHeader](https://github.com/koirodev/prismify-ui/tree/main/src/components/layout/PfHeader): App header; height tied to **`--pf-header-height`** for **`PfMain`** / **`PfError`** layout.
+- [PfMain](https://github.com/koirodev/prismify-ui/tree/main/src/components/layout/PfMain): Main content area filling viewport below header.
+- [PfFooter](https://github.com/koirodev/prismify-ui/tree/main/src/components/layout/PfFooter): Page footer with slots for sections.
+- [PfError](https://github.com/koirodev/prismify-ui/tree/main/src/components/layout/PfError): Centered error page layout.
+
+### Data
+
+- [PfAccordion](https://github.com/koirodev/prismify-ui/tree/main/src/components/data/PfAccordion): Expandable sections list.
+- [PfEmpty](https://github.com/koirodev/prismify-ui/tree/main/src/components/data/PfEmpty): Empty state with icon, title, and actions.
+- [PfScrollArea](https://github.com/koirodev/prismify-ui/tree/main/src/components/data/PfScrollArea): Custom-styled scroll container.
+- [PfTable](https://github.com/koirodev/prismify-ui/tree/main/src/components/data/PfTable): Data table built on **TanStack Table** (**peer:** `@tanstack/vue-table`).
+- [PfTimeline](https://github.com/koirodev/prismify-ui/tree/main/src/components/data/PfTimeline): Vertical timeline of events.
+- [PfMarquee](https://github.com/koirodev/prismify-ui/tree/main/src/components/data/PfMarquee): Horizontal infinite marquee for logos or text.
+- [PfTree](https://github.com/koirodev/prismify-ui/tree/main/src/components/data/PfTree): Hierarchical tree with expand/select.
+- [PfUser](https://github.com/koirodev/prismify-ui/tree/main/src/components/data/PfUser): User row with avatar, name, and meta.
+
+### Navigation
+
+- [PfBreadcrumb](https://github.com/koirodev/prismify-ui/tree/main/src/components/navigation/PfBreadcrumb): Hierarchy breadcrumb trail.
+- [PfLink](https://github.com/koirodev/prismify-ui/tree/main/src/components/navigation/PfLink): Router-aware link (**peer:** `vue-router`).
+- [PfNavigationMenu](https://github.com/koirodev/prismify-ui/tree/main/src/components/navigation/PfNavigationMenu): Horizontal or vertical nav menu.
+- [PfPagination](https://github.com/koirodev/prismify-ui/tree/main/src/components/navigation/PfPagination): Page controls for lists/tables.
+- [PfStepper](https://github.com/koirodev/prismify-ui/tree/main/src/components/navigation/PfStepper): Multi-step wizard indicator.
+- [PfTabs](https://github.com/koirodev/prismify-ui/tree/main/src/components/navigation/PfTabs): Tab list and panels.
+- [PfContentNavigation](https://github.com/koirodev/prismify-ui/tree/main/src/components/navigation/PfContentNavigation): Docs-style sidebar navigation.
+- [PfContentSurround](https://github.com/koirodev/prismify-ui/tree/main/src/components/navigation/PfContentSurround): Prev/next links for content pages.
+- [PfContentToc](https://github.com/koirodev/prismify-ui/tree/main/src/components/navigation/PfContentToc): Table of contents with active heading.
+- [PfFooterColumns](https://github.com/koirodev/prismify-ui/tree/main/src/components/navigation/PfFooterColumns): Multi-column link grid for footers.
+
+### Overlay
+
+- [PfTooltip](https://github.com/koirodev/prismify-ui/tree/main/src/components/overlay/PfTooltip): Hover/focus tooltip (integrates with **`PfApp`** provider).
+- [PfModal](https://github.com/koirodev/prismify-ui/tree/main/src/components/overlay/PfModal): Modal dialog with focus trap patterns.
+- [PfDrawer](https://github.com/koirodev/prismify-ui/tree/main/src/components/overlay/PfDrawer): Slide-in panel from screen edge.
+- [PfDropdownMenu](https://github.com/koirodev/prismify-ui/tree/main/src/components/overlay/PfDropdownMenu): Dropdown actions menu from a trigger.
+- [PfContextMenu](https://github.com/koirodev/prismify-ui/tree/main/src/components/overlay/PfContextMenu): Right-click context menu.
+- [PfContentSearch](https://github.com/koirodev/prismify-ui/tree/main/src/components/overlay/PfContentSearch): Command-palette-style documentation search overlay.
+- [PfToast](https://github.com/koirodev/prismify-ui/tree/main/src/components/overlay/PfToast): Single toast surface.
+- [PfToaster](https://github.com/koirodev/prismify-ui/tree/main/src/components/overlay/PfToaster): Toast host; use with **`usePfToast`**.
+
+### Editor (TipTap)
+
+- [PfEditor](https://github.com/koirodev/prismify-ui/tree/main/src/components/editor/PfEditor): Rich text editor (**peer:** `@tiptap/*` stack as in **`package.json`**).
+- [PfEditorToolbar](https://github.com/koirodev/prismify-ui/tree/main/src/components/editor/PfEditorToolbar): Configurable editor toolbar.
+- [PfEditorSuggestionMenu](https://github.com/koirodev/prismify-ui/tree/main/src/components/editor/PfEditorSuggestionMenu): Slash/command suggestion menu.
+- [PfEditorMentionMenu](https://github.com/koirodev/prismify-ui/tree/main/src/components/editor/PfEditorMentionMenu): `@` mention suggestions.
+- [PfEditorEmojiMenu](https://github.com/koirodev/prismify-ui/tree/main/src/components/editor/PfEditorEmojiMenu): Emoji picker for the editor.
+- [PfEditorDragHandle](https://github.com/koirodev/prismify-ui/tree/main/src/components/editor/PfEditorDragHandle): Block drag handle (**requires** `@tiptap/extension-node-range` among peers).
+
+### Dashboard
+
+- [PfDashboardGroup](https://github.com/koirodev/prismify-ui/tree/main/src/components/dashboard/PfDashboardGroup): Dashboard layout root with sidebar state.
+- [PfDashboardNavbar](https://github.com/koirodev/prismify-ui/tree/main/src/components/dashboard/PfDashboardNavbar): Top bar for dashboard shell.
+- [PfDashboardSidebar](https://github.com/koirodev/prismify-ui/tree/main/src/components/dashboard/PfDashboardSidebar): Collapsible/resizable sidebar.
+- [PfDashboardSidebarCollapse](https://github.com/koirodev/prismify-ui/tree/main/src/components/dashboard/PfDashboardSidebarCollapse): Collapse control for desktop sidebar.
+- [PfDashboardSidebarToggle](https://github.com/koirodev/prismify-ui/tree/main/src/components/dashboard/PfDashboardSidebarToggle): Mobile sidebar toggle.
+- [PfDashboardPanel](https://github.com/koirodev/prismify-ui/tree/main/src/components/dashboard/PfDashboardPanel): Main dashboard content panel.
+- [PfDashboardResizeHandle](https://github.com/koirodev/prismify-ui/tree/main/src/components/dashboard/PfDashboardResizeHandle): Drag handle for panel/sidebar width.
+- [PfDashboardToolbar](https://github.com/koirodev/prismify-ui/tree/main/src/components/dashboard/PfDashboardToolbar): Toolbar below navbar in dashboard layout.
+- [PfDashboardSearch](https://github.com/koirodev/prismify-ui/tree/main/src/components/dashboard/PfDashboardSearch): Dashboard-scoped command/search palette.
+- [PfDashboardSearchButton](https://github.com/koirodev/prismify-ui/tree/main/src/components/dashboard/PfDashboardSearchButton): Button to open **`PfDashboardSearch`**.
+
+---
+
+## Composables, helpers, and types (exported)
+
+| Export | Role | Source (raw) |
+| --- | --- | --- |
+| **`usePfApp`** | Read context from nearest **`PfApp`** (locale, dir, portals, toaster, tooltips). | [usePfApp.ts](https://raw.githubusercontent.com/koirodev/prismify-ui/main/src/composables/usePfApp.ts) |
+| **`usePfToast`** | Imperative toast queue for **`PfToaster`**. | [usePfToast.ts](https://raw.githubusercontent.com/koirodev/prismify-ui/main/src/composables/usePfToast.ts) |
+| **`usePfContentSearch`** | Shared state for **`PfContentSearch`**. | [usePfContentSearch.ts](https://raw.githubusercontent.com/koirodev/prismify-ui/main/src/composables/usePfContentSearch.ts) |
+| **`usePfKbd`**, **`getPfKbdKey`**, **`PF_KBD_GLYPHS`** | Keyboard glyphs for **`PfKbd`**. | [usePfKbd.ts](https://raw.githubusercontent.com/koirodev/prismify-ui/main/src/composables/usePfKbd.ts) |
+| **`mapEditorItems`**, **`mapEditorItem`** | Map toolbar/menu config for **`PfEditor`**. | [editor.ts](https://raw.githubusercontent.com/koirodev/prismify-ui/main/src/utils/editor.ts) |
+| **`PfEditorImageUpload`** | TipTap extension export for image upload flow. | [imageUploadExtension.ts](https://raw.githubusercontent.com/koirodev/prismify-ui/main/src/components/editor/PfEditor/imageUploadExtension.ts) |
+| **`PF_APP_INJECTION_KEY`**, **`resolvePfAppPortalTarget`** | Advanced **`PfApp`** integration. | [injection.ts](https://raw.githubusercontent.com/koirodev/prismify-ui/main/src/components/layout/PfApp/injection.ts) |
+| **`PF_ICON_NAMES`**, **`PF_ICON_SIZES`** | Icon name and size constants. | **`src/components/element/PfIcon/paths.ts`**, **`iconSizes.ts`** |
+
+Full export list and TypeScript types: **[src/index.ts](https://raw.githubusercontent.com/koirodev/prismify-ui/main/src/index.ts)**.
+
+---
+
+## Package entrypoints
+
+- **`prismify-ui`** — components, plugin (**`prismifyPlugin`**), composables, types.
+- **`prismify-ui/style.css`** — required global CSS: tokens + component styles.
+- **`prismify-ui/styles`** — SCSS entry for token pipeline (see **`docs/theming.md`**).
+
+---
+
+## Full token reference (attach separately)
+
+This file does not inline every **`--pf-*`** value. For complete tables, attach **[docs/theming.md](https://raw.githubusercontent.com/koirodev/prismify-ui/main/docs/theming.md)** (raw) or the same path in a local clone.
+
+---
+
+## Source map (for contributors and AI edits)
+
+| Topic | Where |
+| --- | --- |
+| Public API & plugin | `src/index.ts` |
+| Global styles & tokens | `src/styles/index.scss`, `src/styles/_variables.scss`, `src/styles/variables/` |
+| A component | `src/components/<category>/PfName/index.vue` (BEM + `var(--pf-*)`) |
+| Icons glyph list | `src/components/element/PfIcon/paths.ts` (generated from `src/icons/svg/` via `npm run icons:build`) |
+| Storybook | `.storybook/preview.ts`; `*.stories.ts` next to components |
+| Lib build externals | `vite.lib.config.ts` → `rollupOptions.external` |
+
+---
+
+## Behavior notes (implementation)
+
+- **PfInput / PfTextarea:** overlay + optional **`animatedText`**; tokens **`--pf-input-char-*`**.
+- **PfSwitch / PfSlider / PfSelect:** follow **`docs/theming.md`** and existing **`index.vue`** (slider tooltip; select Teleport panel).
+- **PfApp:** shell, portals, toaster, tooltip provider — see Storybook and **`docs/theming.md`**.
+
+---
+
+## Notes for LLMs
+
+- **What this library is:** A cohesive **admin-focused** Vue 3 kit with **SCSS + CSS variables**, not Tailwind. Good when you want shipped styles and **`--pf-*`** theming without utility-class UI.
+- **When to suggest something else:** If the user wants **Tailwind-first** components → consider **Nuxt UI** or **shadcn-vue**. If **Material** or **Ant Design** aesthetics → **Vuetify** / **ant-design-vue**. If **headless only** → **Reka UI** / Headless UI. If **no design system** → primitives only.
+- **Key facts:** No runtime npm **dependencies** (peers only); **`PfTable`** needs **`@tanstack/vue-table`**; **`PfEditor`** needs the **`@tiptap/*`** peer set aligned on versions; **`PfLink`** needs **`vue-router`**.
+- **Quality bar:** Prefer **`transform` / `opacity`** for motion; use **`var(--pf-animation-*)`** from theme. Match existing **`index.vue`** patterns when adding or changing components.
+- **Tests:** Vitest **`*.spec.ts`** beside components; run **`npm run build`** and **`npm test`** after API changes.
+- **Retrieval keywords:** vue admin ui, prismify-ui, pf components, css variables theming, nuxt 4 ui, scss component library, vue data table tanstack, tiptap editor vue, dashboard layout vue.
+
+---
+
+## Using with Cursor / other AI tools
+
+Attach this file or raw URLs above with **`@`** (type **`@`** manually so the tool recognizes context). For token values, attach **`docs/theming.md`** or its [raw URL](https://raw.githubusercontent.com/koirodev/prismify-ui/main/docs/theming.md).
+
+**npm package** ships **`dist/`**, **`docs/`**, **`src/styles/`**, **`llms.txt`**, etc. (see **`package.json` → `files`**). Consumers use **`prismify-ui/style.css`** or **`prismify-ui/styles`**.

package/package.json

@@ -0,0 +1,146 @@
+{
+  "name": "prismify-ui",
+  "version": "0.1.0-alpha.1",
+  "description": "Vue 3 UI kit (SCSS only). Compatible with Nuxt 4.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.vue"
+  ],
+  "main": "./dist/prismify-ui.cjs",
+  "module": "./dist/prismify-ui.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "docs",
+    "src/styles",
+    "LICENSE",
+    "CODE_OF_CONDUCT.md",
+    "CHANGELOG.md",
+    "llms.txt"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/prismify-ui.js",
+      "require": "./dist/prismify-ui.cjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./styles": "./src/styles/index.scss"
+  },
+  "engines": {
+    "node": ">=18.18.0"
+  },
+  "peerDependencies": {
+    "@internationalized/date": "^3.12.0",
+    "@internationalized/number": "^3.6.5",
+    "@tanstack/vue-table": "^8.21.3",
+    "@tiptap/core": "^3.22.3",
+    "@tiptap/extension-bubble-menu": "^3.22.3",
+    "@tiptap/extension-drag-handle": "^3.22.3",
+    "@tiptap/extension-drag-handle-vue-3": "^3.22.3",
+    "@tiptap/extension-emoji": "^3.22.3",
+    "@tiptap/extension-floating-menu": "^3.22.3",
+    "@tiptap/extension-image": "^3.22.3",
+    "@tiptap/extension-link": "^3.22.3",
+    "@tiptap/extension-mention": "^3.22.3",
+    "@tiptap/extension-node-range": "^3.22.3",
+    "@tiptap/extension-placeholder": "^3.22.3",
+    "@tiptap/extension-text-align": "^3.22.3",
+    "@tiptap/extension-underline": "^3.22.3",
+    "@tiptap/markdown": "^3.22.3",
+    "@tiptap/pm": "^3.22.3",
+    "@tiptap/starter-kit": "^3.22.3",
+    "@tiptap/suggestion": "^3.22.3",
+    "@tiptap/vue-3": "^3.22.3",
+    "vue": "^3.4.0",
+    "vue-router": "^4.0.0"
+  },
+  "scripts": {
+    "dev": "vite build --config vite.lib.config.ts --watch",
+    "playground": "vite --config vite.playground.config.ts",
+    "icons:build": "node scripts/build-pf-icons-from-svg.mjs",
+    "prebuild": "npm run icons:build",
+    "build": "vite build --config vite.lib.config.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run test && npm run build",
+    "version:alpha": "npm version prerelease --preid=alpha --no-git-tag-version",
+    "release:alpha": "npm publish --tag alpha"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "nuxt",
+    "nuxt4",
+    "admin",
+    "ui",
+    "components",
+    "scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/koirodev/prismify-ui.git"
+  },
+  "homepage": "https://github.com/koirodev/prismify-ui#readme",
+  "bugs": {
+    "url": "https://github.com/koirodev/prismify-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@internationalized/date": "^3.12.0",
+    "@internationalized/number": "^3.6.5",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/vue3-vite": "^8.6.14",
+    "@tanstack/table-core": "^8.21.3",
+    "@tanstack/vue-table": "^8.21.3",
+    "@tiptap/core": "^3.22.3",
+    "@tiptap/extension-bubble-menu": "^3.22.3",
+    "@tiptap/extension-drag-handle": "^3.22.3",
+    "@tiptap/extension-drag-handle-vue-3": "^3.22.3",
+    "@tiptap/extension-emoji": "^3.22.3",
+    "@tiptap/extension-floating-menu": "^3.22.3",
+    "@tiptap/extension-image": "^3.22.3",
+    "@tiptap/extension-link": "^3.22.3",
+    "@tiptap/extension-mention": "^3.22.3",
+    "@tiptap/extension-node-range": "^3.22.3",
+    "@tiptap/extension-placeholder": "^3.22.3",
+    "@tiptap/extension-text-align": "^3.22.3",
+    "@tiptap/extension-underline": "^3.22.3",
+    "@tiptap/markdown": "^3.22.3",
+    "@tiptap/pm": "^3.22.3",
+    "@tiptap/starter-kit": "^3.22.3",
+    "@tiptap/suggestion": "^3.22.3",
+    "@tiptap/vue-3": "^3.22.3",
+    "@types/node": "^25.5.0",
+    "@typescript-eslint/eslint-plugin": "^8.28.0",
+    "@typescript-eslint/parser": "^8.28.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/test-utils": "^2.4.6",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^9.23.0",
+    "eslint-plugin-prettier": "^5.2.5",
+    "eslint-plugin-vue": "^10.0.0",
+    "happy-dom": "^17.4.4",
+    "jiti": "^2.4.2",
+    "postcss": "^8.5.8",
+    "prettier": "^3.5.3",
+    "sass": "^1.86.0",
+    "storybook": "^8.6.14",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.3",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.0.9",
+    "vue": "^3.5.13",
+    "vue-eslint-parser": "^10.1.1",
+    "vue-router": "^4.6.4"
+  }
+}

package/src/styles/_variables.scss

@@ -0,0 +1,25 @@
+@use './variables/colors';
+@use './variables/link';
+@use './variables/breadcrumb';
+@use './variables/typography';
+@use './variables/accordion';
+@use './variables/tabs';
+@use './variables/empty';
+@use './variables/table';
+@use './variables/timeline';
+@use './variables/stepper';
+@use './variables/layout';
+@use './variables/footerColumns';
+@use './variables/fileUpload';
+@use './variables/effects';
+@use './variables/animation';
+@use './variables/marquee';
+@use './variables/tree';
+@use './variables/navigationMenu';
+@use './variables/contextMenu';
+@use './variables/tooltip';
+@use './variables/modal';
+@use './variables/drawer';
+@use './variables/toast';
+@use './variables/editor';
+@use './variables/dashboard';

package/src/styles/index.scss

@@ -0,0 +1 @@
+@use './variables';

package/src/styles/mixins/_input-tag-pill.scss

@@ -0,0 +1,72 @@
+// Shared tag pill styles (PfInputTags, PfInputMenu multiple).
+@mixin pf-input-tag-pill {
+  padding-block: 1px;
+  padding-inline: var(--pf-space-sm) calc(var(--pf-space-sm) / 1.5);
+  max-width: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pf-space-xs);
+  box-sizing: border-box;
+
+  color: var(--pf-input-text, var(--pf-color-text));
+  font-size: var(--pf-input-font-size, inherit);
+  line-height: var(--pf-input-line-height, inherit);
+
+  box-shadow: inset 0 0 0 var(--pf-stroke-width) var(--pf-border-color);
+  background: var(--pf-color-surface-elevated, var(--pf-color-surface));
+  border-radius: var(--pf-radius-sm, var(--pf-input-radius));
+}
+
+@mixin pf-input-tag-text {
+  min-width: 0;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  overflow: hidden;
+}
+
+@mixin pf-input-tag-remove {
+  margin: 0;
+
+  padding: 1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  color: var(--pf-input-muted, var(--pf-color-muted));
+  line-height: 0;
+
+  background: none;
+  border: none;
+  border-radius: var(--pf-radius-xs);
+
+  transition:
+    color var(--pf-animation-duration) var(--pf-animation-easing),
+    background-color var(--pf-animation-duration) var(--pf-animation-easing);
+
+  cursor: pointer;
+
+  &:not(:disabled):hover {
+    color: var(--pf-input-text, var(--pf-color-text));
+
+    background: var(--pf-color-surface-muted, transparent);
+  }
+
+  &:disabled {
+    opacity: 0.55;
+
+    cursor: not-allowed;
+  }
+}
+
+@mixin pf-input-tags-cluster {
+  margin-inline-end: var(--pf-space-xs);
+
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--pf-space-xs);
+}

package/src/styles/variables/_accordion.scss

@@ -0,0 +1,15 @@
+// PfAccordion
+:root {
+  --pf-accordion-item-border: var(--pf-stroke-width) solid
+    var(--pf-border-color);
+  --pf-accordion-trigger-padding-y: 0.875rem;
+  --pf-accordion-trigger-gap: 0.375rem;
+  --pf-accordion-label-font-size: var(--pf-font-size-sm);
+  --pf-accordion-label-font-weight: var(--pf-font-weight-medium);
+  --pf-accordion-body-font-size: var(--pf-font-size-sm);
+  --pf-accordion-body-padding-bottom: 0.875rem;
+  --pf-accordion-panel-duration: 0.2s;
+  --pf-accordion-panel-easing: ease-out;
+  --pf-accordion-trailing-rotate-duration: 0.2s;
+  --pf-accordion-trailing-rotate-easing: ease-out;
+}

package/src/styles/variables/_animation.scss

@@ -0,0 +1,25 @@
+// Animation variables
+:root {
+  --pf-animation-duration: 0.45s;
+  --pf-animation-easing: cubic-bezier(0.36, 0.3, 0, 1);
+
+  /* PfProgress: indeterminate state */
+  --pf-progress-indeterminate-duration: 2s;
+  --pf-progress-indeterminate-easing: ease-in-out;
+
+  /* PfSkeleton: pulse cycle (Tailwind animate-pulse–like) */
+  --pf-skeleton-pulse-duration: 2s;
+  --pf-skeleton-pulse-mid-opacity: 0.55;
+
+  /* PfInput: character appear and “drop” with `animated-text` */
+  --pf-input-char-appear-duration: 0.2s;
+  --pf-input-char-appear-easing: ease-out;
+  --pf-input-char-fall-duration: 0.18s;
+  --pf-input-char-fall-easing: ease-in;
+
+  /* PfSwitch: thumb movement and “squish” on toggle */
+  --pf-switch-move-duration: 0.4s;
+  --pf-switch-move-easing: cubic-bezier(0.45, 0, 0.2, 1);
+  --pf-switch-squish-duration: 0.45s;
+  --pf-switch-squish-easing: cubic-bezier(0.45, 0, 0.25, 1.25);
+}

package/src/styles/variables/_breadcrumb.scss

@@ -0,0 +1,11 @@
+// PfBreadcrumb
+:root {
+  --pf-breadcrumb-gap: 0.375rem;
+  --pf-breadcrumb-font-size: var(--pf-font-size-sm);
+  --pf-breadcrumb-font-weight: var(--pf-font-weight-medium);
+  --pf-breadcrumb-font-weight-current: var(--pf-font-weight-bold);
+  --pf-breadcrumb-color-muted: var(--pf-color-muted);
+  --pf-breadcrumb-color-current: var(--pf-color-primary);
+  --pf-breadcrumb-link-gap: 0.375rem;
+  --pf-breadcrumb-separator-color: var(--pf-color-muted);
+}

package/src/styles/variables/_colors.scss

@@ -0,0 +1,37 @@
+// Color tokens — override in your app: :root, .dark, or a scoped wrapper.
+:root {
+  --pf-color-surface: #ffffff;
+  --pf-color-text: #0f172a;
+  --pf-color-muted: #64748b;
+
+  --pf-color-primary: #1493b8;
+  --pf-color-primary-hover: #0f7fa1;
+
+  --pf-color-secondary: #6366f1;
+  --pf-color-secondary-hover: #4f46e5;
+
+  --pf-color-success: #16a34a;
+  --pf-color-success-hover: #15803d;
+
+  --pf-color-info: #2563eb;
+  --pf-color-info-hover: #1d4ed8;
+
+  --pf-color-warning: #d97706;
+  --pf-color-warning-hover: #b45309;
+
+  --pf-color-error: #dc2626;
+  --pf-color-error-hover: #b91c1c;
+
+  --pf-color-neutral: #64748b;
+  --pf-color-neutral-hover: #475569;
+
+  --pf-border-color: #e2e8f0;
+  --pf-border-color-hover: #cbd5e1;
+
+  /* PfSkeleton: placeholder fill (slightly above surface, below border) */
+  --pf-skeleton-bg: color-mix(
+    in srgb,
+    var(--pf-color-muted) 14%,
+    var(--pf-color-surface)
+  );
+}

package/src/styles/variables/_contextMenu.scss

@@ -0,0 +1,31 @@
+:root {
+  /* PfContextMenu: layer and backdrop (modal); above PfSelect dropdowns */
+  --pf-context-menu-z-index: 10000;
+  --pf-context-menu-backdrop-z-index: 9999;
+
+  /* Panel: same role as PfSelect custom panel */
+  --pf-context-menu-min-width: 10rem;
+  --pf-context-menu-max-height: min(18rem, 70vh);
+  --pf-context-menu-padding: var(--pf-space-xs);
+  --pf-context-menu-gap: var(--pf-space-sm);
+  --pf-context-menu-submenu-gap: 4px;
+  --pf-context-menu-font-size: var(--pf-font-size-sm);
+  --pf-context-menu-line-height: var(--pf-line-height-md);
+  --pf-context-menu-group-label-font-size: var(--pf-font-size-xs);
+  --pf-context-menu-group-label-font-weight: var(--pf-font-weight-bold);
+  --pf-context-menu-item-description-font-size: var(--pf-font-size-xs);
+  --pf-context-menu-empty-font-size: var(--pf-font-size-sm);
+
+  --pf-context-menu-surface: var(--pf-color-surface, #ffffff);
+  --pf-context-menu-border: var(--pf-border-color, #e2e8f0);
+  --pf-context-menu-text: var(--pf-color-text, #0f172a);
+  --pf-context-menu-muted: var(--pf-color-muted, #64748b);
+  --pf-context-menu-item-hover: color-mix(
+    in srgb,
+    var(--pf-context-menu-muted, #71717a) 14%,
+    transparent
+  );
+  --pf-context-menu-radius: var(--pf-radius-sm, 0.375rem);
+  --pf-context-menu-shadow: 0 var(--pf-space-xs) var(--pf-space-lg)
+    color-mix(in srgb, var(--pf-context-menu-text, #18181b) 12%, transparent);
+}

package/src/styles/variables/_dashboard.scss

@@ -0,0 +1,8 @@
+:root {
+  --pf-dashboard-header-height: 3.5rem;
+  --pf-dashboard-sidebar-pad-x: 1rem;
+  --pf-dashboard-sidebar-pad-y: 0.5rem;
+  --pf-dashboard-panel-pad-x: 1rem;
+  --pf-dashboard-panel-pad-y: 1rem;
+  --pf-dashboard-search-max-width: 48rem;
+}

package/src/styles/variables/_drawer.scss

@@ -0,0 +1,34 @@
+:root {
+  /* PfDrawer: layer (above modal when nested via inline style) */
+  --pf-drawer-z-index: 9010;
+
+  /* Geometry */
+  --pf-drawer-max-size: 96dvh;
+  --pf-drawer-side-max-size: calc(100% - 2rem);
+  --pf-drawer-radius: var(--pf-radius-lg);
+  --pf-drawer-inset: var(--pf-space-md);
+  --pf-drawer-shadow: 0 calc(-1 * var(--pf-space-xs)) var(--pf-space-xl)
+    color-mix(in srgb, var(--pf-color-text) 12%, transparent);
+
+  /* Handle */
+  --pf-drawer-handle-width: 3rem;
+  --pf-drawer-handle-thickness: 0.375rem;
+  --pf-drawer-handle-radius: var(--pf-radius-full);
+  --pf-drawer-handle-gap: var(--pf-space-md);
+
+  /* Overlay */
+  --pf-drawer-overlay-bg: color-mix(
+    in srgb,
+    var(--pf-color-text) 45%,
+    transparent
+  );
+
+  /* Container and padding */
+  --pf-drawer-padding-x: var(--pf-space-lg);
+  --pf-drawer-padding-y: var(--pf-space-lg);
+  --pf-drawer-header-padding-y: var(--pf-space-md);
+  --pf-drawer-footer-padding-y: var(--pf-space-md);
+
+  /* Background when scaled (optional) */
+  --pf-drawer-scale-bg: var(--pf-color-surface);
+}