@pantoken/vue 0.1.0

package/README.md

@@ -0,0 +1,37 @@
+# @pantoken/vue
+
+A Vue plugin over `@pantoken/web-components`. It registers the Instructure custom elements and tells
+Vue's compiler to treat `instui-*` tags as custom elements.
+
+## Install
+
+```sh
+npm i @pantoken/vue
+```
+
+Also available as `pantoken/vue`.
+
+## Usage
+
+```ts
+import { createApp } from "vue";
+import { PantokenVue } from "@pantoken/vue";
+import "@pantoken/css";
+
+createApp(App).use(PantokenVue).mount("#app");
+```
+
+## API
+
+- **`PantokenVue`** — the Vue plugin. `app.use(PantokenVue)` registers the custom elements and configures the compiler to accept `instui-*` tags. Also the default export.
+- **`readToken(name, fallback?): string`** — read a resolved `--instui-*` value. Returns `fallback` on the server.
+- **`register`, `iconSvg`** — re-exported from `@pantoken/web-components` for direct registration and icon-SVG lookup.
+
+## Related
+
+- Pairs with `@pantoken/css` for the base `--instui-*` custom properties.
+- Wraps `@pantoken/web-components`, which supplies the custom elements.
+
+## License
+
+MIT

package/dist/components.css

@@ -0,0 +1 @@
+.pantoken-prose{color:var(--instui-component-text-base-color);font-family:var(--instui-component-text-content-font-family);font-size:var(--instui-component-text-content-font-size);font-weight:var(--instui-component-text-content-font-weight);line-height:var(--instui-component-text-content-line-height)}.pantoken-prose h1,.pantoken-prose h2,.pantoken-prose h3,.pantoken-prose h4,.pantoken-prose h5,.pantoken-prose h6{color:var(--instui-component-heading-base-color);font-family:var(--instui-component-heading-h1-font-family);line-height:var(--instui-component-heading-line-height);margin:var(--instui-spacing-space-lg) 0 var(--instui-spacing-space-sm)}.pantoken-prose h1{font-size:var(--instui-component-heading-h1-font-size);font-weight:var(--instui-component-heading-h1-font-weight)}.pantoken-prose h2{font-size:var(--instui-component-heading-h2-font-size);font-weight:var(--instui-component-heading-h2-font-weight)}.pantoken-prose h3{font-size:var(--instui-component-heading-h3-font-size);font-weight:var(--instui-component-heading-h3-font-weight)}.pantoken-prose h4{font-size:var(--instui-component-heading-h4-font-size);font-weight:var(--instui-component-heading-h4-font-weight)}.pantoken-prose h5{font-size:var(--instui-component-heading-h5-font-size);font-weight:var(--instui-component-heading-h5-font-weight)}.pantoken-prose h6{font-size:var(--instui-component-heading-h6-font-size);font-weight:var(--instui-component-heading-h6-font-weight)}.pantoken-prose p{margin:var(--instui-spacing-space-md) 0}.pantoken-prose a{color:var(--instui-color-text-interactive-navigation-primary-base);text-decoration:underline}.pantoken-prose a:hover{color:var(--instui-color-text-interactive-navigation-primary-hover)}.pantoken-prose strong,.pantoken-prose b{font-weight:var(--instui-component-text-content-important-font-weight)}.pantoken-prose em,.pantoken-prose i{font-style:italic}.pantoken-prose small{font-size:var(--instui-component-text-content-small-font-size)}.pantoken-prose del,.pantoken-prose s{color:var(--instui-color-text-muted);text-decoration:line-through}.pantoken-prose ul,.pantoken-prose ol{margin:var(--instui-spacing-space-md) 0;padding-inline-start:var(--instui-spacing-space-lg)}.pantoken-prose li{margin:var(--instui-spacing-space2xs) 0}.pantoken-prose li.task-list-item{list-style:none}.pantoken-prose input[type=checkbox]{accent-color:var(--instui-color-text-interactive-navigation-primary-base);margin-inline-end:var(--instui-spacing-space-xs)}.pantoken-prose blockquote{margin:var(--instui-spacing-space-md) 0;border-inline-start:var(--instui-border-width-lg) solid var(--instui-color-stroke-base);color:var(--instui-component-text-base-color);font-size:var(--instui-component-text-content-quote-font-size);line-height:var(--instui-component-text-content-quote-line-height);padding-inline-start:var(--instui-spacing-space-md)}.pantoken-prose code{font-family:var(--instui-font-family-code);background:var(--instui-color-background-muted);padding:var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);border-radius:var(--instui-border-radius-sm);font-size:.9em}.pantoken-prose pre{font-family:var(--instui-font-family-code);background:var(--instui-color-background-container);color:var(--instui-color-text-base);padding:var(--instui-spacing-space-md);border:var(--instui-border-width-sm) solid var(--instui-color-stroke-base);border-radius:var(--instui-border-radius-md);overflow-x:auto}.pantoken-prose pre code{font-size:inherit;background:0 0;border-radius:0;padding:0}.pantoken-prose hr{border:none;border-top:var(--instui-border-width-sm) solid var(--instui-color-stroke-base);margin:var(--instui-spacing-space-lg) 0}.pantoken-prose img{border-radius:var(--instui-border-radius-md);max-width:100%}.pantoken-prose table:not([class]){border-collapse:collapse;width:100%;margin:var(--instui-spacing-space-md) 0;background:var(--instui-component-table-background);color:var(--instui-component-table-color);font-family:var(--instui-component-table-font-family);font-size:var(--instui-component-table-font-size)}.pantoken-prose table:not([class]) th{text-align:start;background:var(--instui-component-table-col-header-background);color:var(--instui-component-table-col-header-color);font-weight:var(--instui-component-table-head-font-weight);padding:var(--instui-component-table-col-header-padding-vertical) var(--instui-component-table-col-header-padding-horizontal);border-bottom:var(--instui-border-width-md) solid var(--instui-component-table-row-border-color)}.pantoken-prose table:not([class]) td{color:var(--instui-component-table-cell-color);line-height:var(--instui-component-table-cell-line-height);padding:var(--instui-component-table-cell-padding-vertical) var(--instui-component-table-cell-padding-horizontal);border-bottom:var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color)}

package/dist/index.d.mts

@@ -0,0 +1,39 @@
+import { iconSvg, register } from "@pantoken/web-components";
+
+//#region src/index.d.ts
+/**
+ * Read a resolved token value. Returns `fallback` on the server.
+ *
+ * @example
+ * ```ts
+ * import { readToken } from "@pantoken/vue";
+ *
+ * const brand = readToken("--instui-color-background-brand", "#0374B5");
+ * ```
+ */
+declare function readToken(name: string, fallback?: string): string;
+/** The subset of a Vue `App` this plugin touches. */
+interface VueAppLike {
+  config: {
+    compilerOptions?: {
+      isCustomElement?: (tag: string) => boolean;
+    };
+  };
+}
+/**
+ * The pantoken Vue plugin: `app.use(PantokenVue)`.
+ *
+ * @example
+ * ```ts
+ * import { createApp } from "vue";
+ * import { PantokenVue } from "@pantoken/vue";
+ * import "@pantoken/css";
+ *
+ * createApp(App).use(PantokenVue).mount("#app");
+ * ```
+ */
+declare const PantokenVue: {
+  install(app: VueAppLike): void;
+};
+//#endregion
+export { PantokenVue, PantokenVue as default, iconSvg, readToken, register };

package/dist/index.mjs

@@ -0,0 +1,45 @@
+import { iconSvg, register, register as register$1 } from "@pantoken/web-components";
+//#region src/index.ts
+/**
+* `@pantoken/vue` — a Vue plugin over `@pantoken/web-components`.
+*
+* `install` registers the custom elements and tells Vue's compiler to treat `instui-*` tags as
+* custom elements. `readToken` reads a resolved `--instui-*` value (SSR-safe).
+*
+* @module
+* @experimental
+*/
+/**
+* Read a resolved token value. Returns `fallback` on the server.
+*
+* @example
+* ```ts
+* import { readToken } from "@pantoken/vue";
+*
+* const brand = readToken("--instui-color-background-brand", "#0374B5");
+* ```
+*/
+function readToken(name, fallback = "") {
+	if (typeof document === "undefined") return fallback;
+	return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+/**
+* The pantoken Vue plugin: `app.use(PantokenVue)`.
+*
+* @example
+* ```ts
+* import { createApp } from "vue";
+* import { PantokenVue } from "@pantoken/vue";
+* import "@pantoken/css";
+*
+* createApp(App).use(PantokenVue).mount("#app");
+* ```
+*/
+const PantokenVue = { install(app) {
+	register$1();
+	const options = app.config.compilerOptions ??= {};
+	const previous = options.isCustomElement;
+	options.isCustomElement = (tag) => tag.startsWith("instui-") || (previous?.(tag) ?? false);
+} };
+//#endregion
+export { PantokenVue, PantokenVue as default, iconSvg, readToken, register };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@pantoken/vue",
+  "version": "0.1.0",
+  "description": "Vue plugin for pantoken: registers the web components and reads tokens.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./components.css": "./dist/components.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pantoken/web-components": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vite-plus": "0.2.4",
+    "@pantoken/components": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "pantoken": {
+    "key": "vue",
+    "kind": "subpath"
+  },
+  "scripts": {
+    "generate": "node scripts/generate.ts",
+    "build": "vp run generate && vp pack",
+    "dev": "vp run generate && vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
+  }
+}