@phila/phila-ui-filter-panel 0.1.0-beta.0

package/README.md

@@ -0,0 +1,84 @@
+# FilterPanel Component
+
+<!-- status-badge-start -->
+
+![Status: In Progress](https://img.shields.io/badge/-In%20Progress-yellow)
+
+<!-- status-badge-end -->
+
+`@phila/phila-ui-filter-panel` — filter panel for faceted filtering — the "All Filters" panel (header, optional search, collapsible checkbox/radio sections, deferred Reset/Apply).
+
+**Presentational:** the app controls visibility and placement by mounting/unmounting `FilterPanel`. The component emits `close` and does not hide itself.
+
+## Installation
+
+```bash
+pnpm add @phila/phila-ui-filter-panel
+```
+
+## Usage with FilterChipGroup
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { FilterChipGroup } from "@phila/phila-ui-filter-chip";
+import { FilterPanel } from "@phila/phila-ui-filter-panel";
+import type { FilterDefinition, FilterValues } from "@phila/phila-ui-core";
+
+const filters: FilterDefinition[] = [
+  /* ... */
+];
+const values = ref<FilterValues>({});
+const panelOpen = ref(false);
+</script>
+
+<template>
+  <FilterChipGroup :filters="filters" v-model="values" filter-button @open-filters="panelOpen = true" />
+  <FilterPanel v-if="panelOpen" :filters="filters" v-model="values" @close="panelOpen = false" />
+</template>
+```
+
+`FilterDefinition` and `FilterValues` are shared types from `@phila/phila-ui-core`. The chip row and the panel share the same `values` ref — two views over one piece of state.
+
+## Props
+
+| Prop                | Type                 | Default         | Description                            |
+| ------------------- | -------------------- | --------------- | -------------------------------------- |
+| `filters`           | `FilterDefinition[]` | —               | Required. Ordered list of filter axes. |
+| `modelValue`        | `FilterValues`       | `{}`            | Current filter state (`v-model`).      |
+| `title`             | `string`             | `"All Filters"` | Panel header title.                    |
+| `searchable`        | `boolean`            | `true`          | Show the in-panel search box.          |
+| `searchPlaceholder` | `string`             | `"Search"`      | Placeholder text for the search input. |
+| `applyText`         | `string`             | `"Apply"`       | Label for the Apply button.            |
+| `resetText`         | `string`             | `"Reset"`       | Label for the Reset button.            |
+
+## Events
+
+| Event               | Payload        | Description                                                                  |
+| ------------------- | -------------- | ---------------------------------------------------------------------------- |
+| `update:modelValue` | `FilterValues` | Emitted when Apply is clicked. Carries the confirmed filter state.           |
+| `close`             | —              | Emitted when ✕ is clicked and after Apply. The app should unmount the panel. |
+
+## Development
+
+### Install Dependencies
+
+```bash
+pnpm install
+```
+
+### Build Library
+
+```bash
+pnpm build
+```
+
+### Type Check
+
+```bash
+pnpm type-check
+```
+
+## License
+
+MIT

package/dist/FilterPanel.vue.d.ts

@@ -0,0 +1,18 @@
+import { FilterValues } from '@phila/phila-ui-core';
+import { FilterPanelProps } from './index';
+declare const _default: import('vue').DefineComponent<FilterPanelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: FilterValues) => any;
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<FilterPanelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FilterValues) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    modelValue: FilterValues;
+    title: string;
+    searchable: boolean;
+    searchPlaceholder: string;
+    applyText: string;
+    resetText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=FilterPanel.vue.d.ts.map

package/dist/FilterPanel.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.vue.d.ts","sourceRoot":"","sources":["../src/FilterPanel.vue"],"names":[],"mappings":"AAkKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;AAyQhD,wBASG"}

package/dist/FilterPanelSection.vue.d.ts

@@ -0,0 +1,15 @@
+import { FilterDefinition } from '@phila/phila-ui-core';
+type __VLS_Props = {
+    filter: FilterDefinition;
+    collapsed: boolean;
+    modelValue: string | string[] | boolean | undefined;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    toggle: () => any;
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;
+//# sourceMappingURL=FilterPanelSection.vue.d.ts.map

package/dist/FilterPanelSection.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanelSection.vue.d.ts","sourceRoot":"","sources":["../src/FilterPanelSection.vue"],"names":[],"mappings":"AA8FA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,GAAG,SAAS,CAAC;CACrD,CAAC;;;;;;;;AAkJF,wBAQG"}

package/dist/index.css

@@ -0,0 +1 @@
+.phila-filter-panel__section[data-v-1b64f401]{border-bottom:1px solid var(--Schemes-Border, #ccc);padding:.75rem 0}.phila-filter-panel__section-toggle[data-v-1b64f401]{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;font-size:inherit;font-weight:700}.phila-filter-panel__section-toggle .is-collapsed[data-v-1b64f401]{transform:rotate(-90deg)}.phila-filter-panel__section-body[data-v-1b64f401]{padding-top:.75rem}.phila-filter-panel__section-body[data-v-1b64f401] .labels-container{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.phila-filter-panel[data-v-ec98ee74]{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;height:100%;background:#fff;overflow-y:auto;box-sizing:border-box}.phila-filter-panel__header[data-v-ec98ee74]{display:flex;align-items:center;justify-content:space-between}.phila-filter-panel__title[data-v-ec98ee74]{margin:0;font-size:1.25rem;font-weight:700}.phila-filter-panel__close[data-v-ec98ee74]{background:none;border:none;cursor:pointer;font-size:1.25rem;line-height:1}.phila-filter-panel__sections[data-v-ec98ee74]{display:flex;flex-direction:column}.phila-filter-panel__footer[data-v-ec98ee74]{display:flex;gap:.75rem;margin-top:auto}.phila-filter-panel__footer[data-v-ec98ee74]>*{flex:1}

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { BaseProps, FilterDefinition, FilterValues } from '@phila/phila-ui-core';
+export { default as FilterPanel } from './FilterPanel.vue';
+export interface FilterPanelProps extends BaseProps {
+    /** Filters to render. Only filters with a non-empty `choices` array become sections. */
+    filters: FilterDefinition[];
+    /** Committed/applied values (v-model). The panel edits a draft and emits this on Apply. */
+    modelValue?: FilterValues;
+    /** Header title. */
+    title?: string;
+    /** Show the in-panel search box that filters sections by label/choice text. */
+    searchable?: boolean;
+    /** Placeholder for the search box. */
+    searchPlaceholder?: string;
+    /** Apply button label (an active-selection count is appended as " (N)"). */
+    applyText?: string;
+    /** Reset button label. */
+    resetText?: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEtF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wFAAwF;IACxF,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,2FAA2F;IAC3F,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),v=require("@phila/phila-ui-core"),x=require("@phila/phila-ui-search"),y=require("@phila/phila-ui-button"),V=require("@fortawesome/pro-solid-svg-icons"),S=require("@phila/phila-ui-checkbox"),_=require("@phila/phila-ui-radio"),N={class:"phila-filter-panel__section"},A={class:"phila-filter-panel__section-body"},E=e.defineComponent({__name:"FilterPanelSection",props:{filter:{},collapsed:{type:Boolean},modelValue:{type:[String,Array,Boolean]}},emits:["toggle","update:modelValue"],setup(o,{emit:p}){const n=o,c=p,r=e.computed(()=>n.filter.choices??[]),m=e.computed(()=>Array.isArray(n.modelValue)?n.modelValue:[]),s=e.computed(()=>typeof n.modelValue=="string"?n.modelValue:"");return(f,i)=>(e.openBlock(),e.createElementBlock("section",N,[e.createElementVNode("button",{type:"button",class:"phila-filter-panel__section-toggle",onClick:i[0]||(i[0]=u=>c("toggle"))},[e.createElementVNode("span",null,e.toDisplayString(o.filter.label),1),e.createVNode(e.unref(v.Icon),{"icon-definition":e.unref(V.faChevronDown),size:"xxsmall",inline:"",decorative:"",class:e.normalizeClass({"is-collapsed":o.collapsed})},null,8,["icon-definition","class"])]),e.withDirectives(e.createElementVNode("div",A,[o.filter.multiple?(e.openBlock(),e.createBlock(e.unref(S.CheckboxGroup),{key:0,"group-label":o.filter.label,choices:r.value,"model-value":m.value,"onUpdate:modelValue":i[1]||(i[1]=u=>c("update:modelValue",u))},null,8,["group-label","choices","model-value"])):(e.openBlock(),e.createBlock(e.unref(_.RadioGroup),{key:1,"group-label":o.filter.label,choices:r.value,"model-value":s.value,"onUpdate:modelValue":i[2]||(i[2]=u=>c("update:modelValue",u))},null,8,["group-label","choices","model-value"]))],512),[[e.vShow,!o.collapsed]])]))}}),k=(o,p)=>{const n=o.__vccOpts||o;for(const[c,r]of p)n[c]=r;return n},P=k(E,[["__scopeId","data-v-1b64f401"]]),U={class:"phila-filter-panel__header"},T={class:"phila-filter-panel__title"},q={class:"phila-filter-panel__sections"},w={class:"phila-filter-panel__footer"},F=e.defineComponent({__name:"FilterPanel",props:{filters:{},modelValue:{default:()=>({})},title:{default:"All Filters"},searchable:{type:Boolean,default:!0},searchPlaceholder:{default:"Search"},applyText:{default:"Apply"},resetText:{default:"Reset"},className:{}},emits:["update:modelValue","close"],setup(o,{emit:p}){const n=o,c=p,r=e.ref({}),m=e.ref(""),s=e.ref({});function f(l){const a={};for(const t of Object.keys(l)){const d=l[t];a[t]=Array.isArray(d)?[...d]:d}return a}e.onMounted(()=>{r.value=f(n.modelValue)});const i=e.computed(()=>n.filters.filter(l=>Array.isArray(l.choices)&&l.choices.length>0)),u=e.computed(()=>{const l=m.value.trim().toLowerCase();return l?i.value.filter(a=>a.label.toLowerCase().includes(l)||(a.choices??[]).some(t=>t.text.toLowerCase().includes(l))):i.value}),h=e.computed(()=>i.value.reduce((l,a)=>{if(a.excludeFromCount)return l;const t=r.value[a.key];return l+(Array.isArray(t)?t.length:t?1:0)},0));function g(l,a){r.value={...r.value,[l]:a}}function b(l){s.value={...s.value,[l]:!s.value[l]}}function C(){r.value={}}function B(){c("update:modelValue",f(r.value)),c("close")}return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(v.cn)("phila-filter-panel",n.className))},[e.createElementVNode("header",U,[e.createElementVNode("h2",T,e.toDisplayString(o.title),1),e.createElementVNode("button",{type:"button",class:"phila-filter-panel__close","aria-label":"Close filters",onClick:a[0]||(a[0]=t=>c("close"))},[e.createVNode(e.unref(v.Icon),{"icon-definition":e.unref(V.faXmark),size:"small",inline:"",decorative:""},null,8,["icon-definition"])])]),o.searchable?(e.openBlock(),e.createBlock(e.unref(x.Search),{key:0,modelValue:m.value,"onUpdate:modelValue":a[1]||(a[1]=t=>m.value=t),placeholder:o.searchPlaceholder},null,8,["modelValue","placeholder"])):e.createCommentVNode("",!0),e.createElementVNode("div",q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,t=>(e.openBlock(),e.createBlock(P,{key:t.key,filter:t,collapsed:!!s.value[t.key],"model-value":r.value[t.key],onToggle:d=>b(t.key),"onUpdate:modelValue":d=>g(t.key,d)},null,8,["filter","collapsed","model-value","onToggle","onUpdate:modelValue"]))),128))]),e.createElementVNode("footer",w,[e.createVNode(e.unref(y.PhilaButton),{variant:"secondary",onClick:C},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.resetText),1)]),_:1}),e.createVNode(e.unref(y.PhilaButton),{variant:"primary",onClick:B},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.applyText)+e.toDisplayString(h.value?` (${h.value})`:""),1)]),_:1})])],2))}}),D=k(F,[["__scopeId","data-v-ec98ee74"]]);exports.FilterPanel=D;

package/dist/index.mjs

@@ -0,0 +1,167 @@
+import { defineComponent as w, computed as f, createElementBlock as _, openBlock as u, createElementVNode as c, withDirectives as L, createVNode as V, toDisplayString as y, unref as r, normalizeClass as B, createBlock as g, vShow as z, ref as b, onMounted as D, createCommentVNode as I, Fragment as E, renderList as G, withCtx as C, createTextVNode as A } from "vue";
+import { Icon as F, cn as O } from "@phila/phila-ui-core";
+import { Search as R } from "@phila/phila-ui-search";
+import { PhilaButton as S } from "@phila/phila-ui-button";
+import { faChevronDown as j, faXmark as q } from "@fortawesome/pro-solid-svg-icons";
+import { CheckboxGroup as M } from "@phila/phila-ui-checkbox";
+import { RadioGroup as X } from "@phila/phila-ui-radio";
+import './index.css';const H = { class: "phila-filter-panel__section" }, J = { class: "phila-filter-panel__section-body" }, K = /* @__PURE__ */ w({
+  __name: "FilterPanelSection",
+  props: {
+    filter: {},
+    collapsed: { type: Boolean },
+    modelValue: { type: [String, Array, Boolean] }
+  },
+  emits: ["toggle", "update:modelValue"],
+  setup(t, { emit: v }) {
+    const a = t, s = v, n = f(() => a.filter.choices ?? []), h = f(() => Array.isArray(a.modelValue) ? a.modelValue : []), d = f(() => typeof a.modelValue == "string" ? a.modelValue : "");
+    return (k, i) => (u(), _("section", H, [
+      c("button", {
+        type: "button",
+        class: "phila-filter-panel__section-toggle",
+        onClick: i[0] || (i[0] = (m) => s("toggle"))
+      }, [
+        c("span", null, y(t.filter.label), 1),
+        V(r(F), {
+          "icon-definition": r(j),
+          size: "xxsmall",
+          inline: "",
+          decorative: "",
+          class: B({ "is-collapsed": t.collapsed })
+        }, null, 8, ["icon-definition", "class"])
+      ]),
+      L(c("div", J, [
+        t.filter.multiple ? (u(), g(r(M), {
+          key: 0,
+          "group-label": t.filter.label,
+          choices: n.value,
+          "model-value": h.value,
+          "onUpdate:modelValue": i[1] || (i[1] = (m) => s("update:modelValue", m))
+        }, null, 8, ["group-label", "choices", "model-value"])) : (u(), g(r(X), {
+          key: 1,
+          "group-label": t.filter.label,
+          choices: n.value,
+          "model-value": d.value,
+          "onUpdate:modelValue": i[2] || (i[2] = (m) => s("update:modelValue", m))
+        }, null, 8, ["group-label", "choices", "model-value"]))
+      ], 512), [
+        [z, !t.collapsed]
+      ])
+    ]));
+  }
+}), P = (t, v) => {
+  const a = t.__vccOpts || t;
+  for (const [s, n] of v)
+    a[s] = n;
+  return a;
+}, Q = /* @__PURE__ */ P(K, [["__scopeId", "data-v-1b64f401"]]), W = { class: "phila-filter-panel__header" }, Y = { class: "phila-filter-panel__title" }, Z = { class: "phila-filter-panel__sections" }, ee = { class: "phila-filter-panel__footer" }, le = /* @__PURE__ */ w({
+  __name: "FilterPanel",
+  props: {
+    filters: {},
+    modelValue: { default: () => ({}) },
+    title: { default: "All Filters" },
+    searchable: { type: Boolean, default: !0 },
+    searchPlaceholder: { default: "Search" },
+    applyText: { default: "Apply" },
+    resetText: { default: "Reset" },
+    className: {}
+  },
+  emits: ["update:modelValue", "close"],
+  setup(t, { emit: v }) {
+    const a = t, s = v, n = b({}), h = b(""), d = b({});
+    function k(e) {
+      const o = {};
+      for (const l of Object.keys(e)) {
+        const p = e[l];
+        o[l] = Array.isArray(p) ? [...p] : p;
+      }
+      return o;
+    }
+    D(() => {
+      n.value = k(a.modelValue);
+    });
+    const i = f(() => a.filters.filter((e) => Array.isArray(e.choices) && e.choices.length > 0)), m = f(() => {
+      const e = h.value.trim().toLowerCase();
+      return e ? i.value.filter(
+        (o) => o.label.toLowerCase().includes(e) || (o.choices ?? []).some((l) => l.text.toLowerCase().includes(e))
+      ) : i.value;
+    }), x = f(
+      () => i.value.reduce((e, o) => {
+        if (o.excludeFromCount) return e;
+        const l = n.value[o.key];
+        return e + (Array.isArray(l) ? l.length : l ? 1 : 0);
+      }, 0)
+    );
+    function T(e, o) {
+      n.value = { ...n.value, [e]: o };
+    }
+    function $(e) {
+      d.value = { ...d.value, [e]: !d.value[e] };
+    }
+    function N() {
+      n.value = {};
+    }
+    function U() {
+      s("update:modelValue", k(n.value)), s("close");
+    }
+    return (e, o) => (u(), _("div", {
+      class: B(r(O)("phila-filter-panel", a.className))
+    }, [
+      c("header", W, [
+        c("h2", Y, y(t.title), 1),
+        c("button", {
+          type: "button",
+          class: "phila-filter-panel__close",
+          "aria-label": "Close filters",
+          onClick: o[0] || (o[0] = (l) => s("close"))
+        }, [
+          V(r(F), {
+            "icon-definition": r(q),
+            size: "small",
+            inline: "",
+            decorative: ""
+          }, null, 8, ["icon-definition"])
+        ])
+      ]),
+      t.searchable ? (u(), g(r(R), {
+        key: 0,
+        modelValue: h.value,
+        "onUpdate:modelValue": o[1] || (o[1] = (l) => h.value = l),
+        placeholder: t.searchPlaceholder
+      }, null, 8, ["modelValue", "placeholder"])) : I("", !0),
+      c("div", Z, [
+        (u(!0), _(E, null, G(m.value, (l) => (u(), g(Q, {
+          key: l.key,
+          filter: l,
+          collapsed: !!d.value[l.key],
+          "model-value": n.value[l.key],
+          onToggle: (p) => $(l.key),
+          "onUpdate:modelValue": (p) => T(l.key, p)
+        }, null, 8, ["filter", "collapsed", "model-value", "onToggle", "onUpdate:modelValue"]))), 128))
+      ]),
+      c("footer", ee, [
+        V(r(S), {
+          variant: "secondary",
+          onClick: N
+        }, {
+          default: C(() => [
+            A(y(t.resetText), 1)
+          ]),
+          _: 1
+        }),
+        V(r(S), {
+          variant: "primary",
+          onClick: U
+        }, {
+          default: C(() => [
+            A(y(t.applyText) + y(x.value ? ` (${x.value})` : ""), 1)
+          ]),
+          _: 1
+        })
+      ])
+    ], 2));
+  }
+}), ce = /* @__PURE__ */ P(le, [["__scopeId", "data-v-ec98ee74"]]);
+export {
+  ce as FilterPanel
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@phila/phila-ui-filter-panel",
+  "version": "0.1.0-beta.0",
+  "type": "module",
+  "description": "Filter panel for faceted filtering",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "ui",
+    "filter-panel",
+    "vue",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/pro-solid-svg-icons": "^7.1.0"
+  },
+  "dependencies": {
+    "@phila/phila-ui-core": "3.0.0-beta.5",
+    "@phila/phila-ui-search": "1.2.0-beta.8",
+    "@phila/phila-ui-radio": "0.1.1-beta.6",
+    "@phila/phila-ui-checkbox": "0.1.1-beta.6",
+    "@phila/phila-ui-button": "2.2.3-beta.6"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint": "^9.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build-win": "vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint src --ext .ts,.tsx,.vue",
+    "lint:fix": "eslint src --ext .ts,.tsx,.vue --fix",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  }
+}