diff --git a/package.json b/package.json index 1ec8e01..f1537cc 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@rolldown/plugin-babel": "^0.2.3", "postcss-custom-media": "^12.0.1", "unplugin-dts": "^1.0.2", + "unplugin-icons": "^23.0.1", "vite-plugin-css-injected-by-js": "^3.5.2", "vite-plugin-lit-css": "^3.0.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 85a3198..55d8b00 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,9 @@ importers: unplugin-dts: specifier: ^1.0.2 version: 1.0.2(@voidzero-dev/vite-plus-core@0.2.1(@tsdown/css@0.22.1)(@types/node@24.13.2)(typescript@6.0.3))(rolldown@1.1.2)(typescript@6.0.3) + unplugin-icons: + specifier: ^23.0.1 + version: 23.0.1 vite: specifier: npm:@voidzero-dev/vite-plus-core@latest version: '@voidzero-dev/vite-plus-core@0.2.1(@tsdown/css@0.22.1)(@types/node@24.13.2)(typescript@6.0.3)' @@ -74,7 +77,7 @@ importers: version: 4.0.8-1 solid-ui: specifier: dev - version: 3.1.3-6(@floating-ui/utils@0.2.11)(@types/node@24.13.2)(@types/react@19.2.17) + version: 3.1.3-7(@floating-ui/utils@0.2.11)(@types/node@24.13.2)(@types/react@19.2.17) typescript: specifier: ^6.0.3 version: 6.0.3 @@ -87,6 +90,9 @@ importers: packages: + '@antfu/install-pkg@1.1.0': + resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==} + '@awesome.me/webawesome@3.9.0': resolution: {integrity: sha512-doKgUCglb/E1d/dYSzXQQthlYmyndFOtG/Vr5HyHjIFqNwn/tbutMsIMYJrYFEjq07vPwcOHKeAulbiqoslRoQ==} engines: {node: '>=14.17.0'} @@ -718,6 +724,12 @@ packages: resolution: {integrity: sha512-0NLM96V3ziZkkOlhixSZiXe8CzewECVNtSj04s2hW2e65SgzQPzM12VWSovuRIy+2UJA2Bjkf9405yrty9tgcg==} hasBin: true + '@iconify/types@2.0.0': + resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + + '@iconify/utils@3.1.3': + resolution: {integrity: sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw==} + '@jridgewell/gen-mapping@0.3.13': resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} @@ -1861,6 +1873,9 @@ packages: ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} + import-meta-resolve@4.2.0: + resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==} + import-without-cache@0.4.0: resolution: {integrity: sha512-NkJQA7oZ4YHQhd2+H3BoRFKF3d/XNsiKpHZCQEMH9pDX27hQQLsTyOocyRgaIVtf8gHX3Nt3LPkR4e5EdtPAGQ==} engines: {node: ^22.18.0 || >=24.0.0} @@ -2170,16 +2185,13 @@ packages: package-lock.json@1.0.0: resolution: {integrity: sha512-+yEXtNdlCs5N0Zy/9uvkifgf/RqnGu0WqP4j9Wu1Us4YReFe1YNBh2Krmf8B1xGxjpYnta63K55QP8bkafnOzA==} + package-manager-detector@1.6.0: + resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==} + package.json@2.0.1: resolution: {integrity: sha512-pSxZ6XR5yEawRN2ekxx9IKgPN5uNAYco7MCPxtBEWMKO3UKWa1X2CtQMzMgloeGj2g2o6cue3Sb5iPkByIJqlw==} deprecated: Use pkg.json instead. - pane-registry@3.1.2-0: - resolution: {integrity: sha512-oBFv4x+fNWAU9z+jZRtY2XIWT9DMhcr8ogSGSR5JIobq+tDYzw9VTAzrAz40JgBB7LGbmwz9ov1INcHSSQi6aQ==} - peerDependencies: - rdflib: 2.3.9 - solid-logic: 4.0.8-0 - pane-registry@3.1.2-1: resolution: {integrity: sha512-aibuyF8pAgHDnmywsMEKUddIcqC0oPF8fNx2TP7zRpRW9aYk2iv06td+br8wenbmu2V/l6Y6aJmCkckHWN/GpA==} @@ -2299,6 +2311,9 @@ packages: rdflib@2.3.9: resolution: {integrity: sha512-6HnEQ22QzgqPW2/R8y5IaeQoXnho6U+ovU1q/ZF556zEnSK4buwhw8/CDdRDwIHZQh5+PAncQxUhluO3JmguJQ==} + rdflib@2.4.0: + resolution: {integrity: sha512-DPBFlnkA7lWgskbgyPsRxHE5S/9Ni5KHNgwzrq8CucG+TBxEHTGRSeMKjWhZlZhBhmQFu0YQGjOYyrzmkX/gwg==} + read-all-stream@3.1.0: resolution: {integrity: sha512-DI1drPHbmBcUDWrJ7ull/F2Qb8HkwBncVx8/RpKYFSIACYaVRQReISYPdZz/mt1y1+qMCOrfReTopERmaxtP6w==} engines: {node: '>=0.10.0'} @@ -2400,12 +2415,6 @@ packages: resolution: {integrity: sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA==} deprecated: Unsupported - solid-logic@4.0.8-0: - resolution: {integrity: sha512-/vdP03m8zZPkh1nhpSWedlYR3pWDcLrGwFvwQc8wR3vIOYZ0MQME3vlcwW7T5yhrSRkKcrQD9Ubq06tDRUBIrQ==} - engines: {node: '>=18'} - peerDependencies: - rdflib: ^2.3.9 - solid-logic@4.0.8-1: resolution: {integrity: sha512-9Vtg9ukEaDTIvBPqECORWRtEJ3nTlEvInJzUCJZDp1qjN9VIdJG0mSiPTIP9RXOEOSAA+Q+cP3d7BzsNyI/RVA==} engines: {node: '>=18'} @@ -2413,8 +2422,8 @@ packages: solid-namespace@0.5.4: resolution: {integrity: sha512-oPAv8xIg2MOLz069JRdvsSbYCpQN+umPJJ9LBFPzCrYuSw+dW4TMUOTDxTWS5xy+B3XN4+Fx3iIS5Jm8abm4Mg==} - solid-ui@3.1.3-6: - resolution: {integrity: sha512-5bzrJ5ChrYnqZARj+RAXybmRaOmkh7KD3AHIpSw1Uu/JDAKz5ateye5FPVuLs0WDY4GFn+/pHqaRfTEzXrsisQ==} + solid-ui@3.1.3-7: + resolution: {integrity: sha512-de+PhkEqW+nudPGICm5YFCH2UHeqPn++1fzzUzbYW78YYvxhq/FsQTlo/NwtaJzUz5IYV/JoUBADboU1pMvgsQ==} source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} @@ -2452,9 +2461,6 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - tailwindcss@4.3.0: - resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==} - tapable@2.3.3: resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==} engines: {node: '>=6'} @@ -2604,6 +2610,23 @@ packages: webpack: optional: true + unplugin-icons@23.0.1: + resolution: {integrity: sha512-rv0XEJepajKzDLvRUWASM8K+8+/CCfZn2jtogXqg6RIp7kpatRc/aFrVJn8ANQA09e++lPEEv9yX8cC9enc+QQ==} + peerDependencies: + '@svgr/core': '>=7.0.0' + '@svgx/core': ^1.0.1 + '@vue/compiler-sfc': ^3.0.2 + svelte: ^3.0.0 || ^4.0.0 || ^5.0.0 + peerDependenciesMeta: + '@svgr/core': + optional: true + '@svgx/core': + optional: true + '@vue/compiler-sfc': + optional: true + svelte: + optional: true + unplugin@2.3.11: resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==} engines: {node: '>=18.12.0'} @@ -2734,6 +2757,11 @@ packages: snapshots: + '@antfu/install-pkg@1.1.0': + dependencies: + package-manager-detector: 1.6.0 + tinyexec: 1.2.4 + '@awesome.me/webawesome@3.9.0(@floating-ui/utils@0.2.11)(@types/node@24.13.2)(@types/react@19.2.17)': dependencies: '@ctrl/tinycolor': 4.1.0 @@ -3555,6 +3583,14 @@ snapshots: '@frogcat/ttl2jsonld@0.0.10': {} + '@iconify/types@2.0.0': {} + + '@iconify/utils@3.1.3': + dependencies: + '@antfu/install-pkg': 1.1.0 + '@iconify/types': 2.0.0 + import-meta-resolve: 4.2.0 + '@jridgewell/gen-mapping@0.3.13': dependencies: '@jridgewell/sourcemap-codec': 1.5.5 @@ -4355,6 +4391,8 @@ snapshots: ieee754@1.2.1: {} + import-meta-resolve@4.2.0: {} + import-without-cache@0.4.0: {} inherits@2.0.4: {} @@ -4639,17 +4677,14 @@ snapshots: package-lock.json@1.0.0: {} + package-manager-detector@1.6.0: {} + package.json@2.0.1: dependencies: git-package-json: 1.4.11 git-source: 1.1.11 package-json: 2.4.0 - pane-registry@3.1.2-0(rdflib@2.3.9)(solid-logic@4.0.8-0(rdflib@2.3.9)): - dependencies: - rdflib: 2.3.9 - solid-logic: 4.0.8-0(rdflib@2.3.9) - pane-registry@3.1.2-1: {} parse-json@2.2.0: @@ -4768,6 +4803,21 @@ snapshots: transitivePeerDependencies: - encoding + rdflib@2.4.0: + dependencies: + '@babel/runtime': 7.29.7 + '@frogcat/ttl2jsonld': 0.0.10 + '@rdfjs/types': 2.0.1 + '@xmldom/xmldom': 0.9.10 + cross-fetch: 4.1.0 + jsonld: 9.0.0 + n3: 2.1.0 + package-lock.json: 1.0.0 + package.json: 2.0.1 + solid-namespace: 0.5.4 + transitivePeerDependencies: + - encoding + read-all-stream@3.1.0: dependencies: pinkie-promise: 2.0.1 @@ -4890,12 +4940,6 @@ snapshots: sliced@1.0.1: {} - solid-logic@4.0.8-0(rdflib@2.3.9): - dependencies: - '@uvdsl/solid-oidc-client-browser': 0.2.3 - rdflib: 2.3.9 - solid-namespace: 0.5.4 - solid-logic@4.0.8-1: dependencies: '@uvdsl/solid-oidc-client-browser': 0.2.3 @@ -4903,7 +4947,7 @@ snapshots: solid-namespace@0.5.4: {} - solid-ui@3.1.3-6(@floating-ui/utils@0.2.11)(@types/node@24.13.2)(@types/react@19.2.17): + solid-ui@3.1.3-7(@floating-ui/utils@0.2.11)(@types/node@24.13.2)(@types/react@19.2.17): dependencies: '@awesome.me/webawesome': 3.9.0(@floating-ui/utils@0.2.11)(@types/node@24.13.2)(@types/react@19.2.17) '@lit/context': 1.1.6 @@ -4912,11 +4956,10 @@ snapshots: escape-html: 1.0.3 lit: 3.3.3 mime-types: 3.0.2 - pane-registry: 3.1.2-0(rdflib@2.3.9)(solid-logic@4.0.8-0(rdflib@2.3.9)) - rdflib: 2.3.9 - solid-logic: 4.0.8-0(rdflib@2.3.9) + pane-registry: 3.1.2-1 + rdflib: 2.4.0 + solid-logic: 4.0.8-1 solid-namespace: 0.5.4 - tailwindcss: 4.3.0 uuid: 14.0.1 optionalDependencies: fsevents: 2.3.3 @@ -4958,8 +5001,6 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - tailwindcss@4.3.0: {} - tapable@2.3.3: {} timed-out@3.1.3: {} @@ -5066,6 +5107,14 @@ snapshots: transitivePeerDependencies: - supports-color + unplugin-icons@23.0.1: + dependencies: + '@antfu/install-pkg': 1.1.0 + '@iconify/utils': 3.1.3 + local-pkg: 1.2.1 + obug: 2.1.3 + unplugin: 2.3.11 + unplugin@2.3.11: dependencies: '@jridgewell/remapping': 2.3.5 diff --git a/src/pane-sandbox.ts b/src/pane-sandbox.ts index d7ca455..43a92d1 100644 --- a/src/pane-sandbox.ts +++ b/src/pane-sandbox.ts @@ -12,6 +12,7 @@ import 'solid-ui/components/button'; import './styles/legacy-global.css'; import './styles/legacy-utilities.css'; +import './styles/sandbox.css'; function unsupportedPane(name: string): PaneDefinition { return { @@ -104,7 +105,7 @@ export default async function (pane: PaneDefinition, options: PaneSandboxPluginO await authn.checkUser(); await renderPane(fetcher, subject, pane, context); - header.classList.remove('-translate-y-full'); + header.classList.remove('sandbox-header--hidden'); loading.style.opacity = '0'; paneName.textContent = pane.name; changeSubject.addEventListener('click', async () => { diff --git a/src/styles/sandbox.css b/src/styles/sandbox.css new file mode 100644 index 0000000..bea2659 --- /dev/null +++ b/src/styles/sandbox.css @@ -0,0 +1,58 @@ +.sandbox-header { + background-color: #f3f4f6; + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0; + transition-property: transform; + transition-delay: 200ms; + transition-duration: 300ms; +} + +.sandbox-header--hidden { + transform: translateY(-100%); +} + +.sandbox-header h1 { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 0; +} + +.sandbox-subject-row { + margin-top: 0.375rem; + display: flex; + max-width: 100%; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; +} + +.sandbox-subject-link { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #4b5563; +} + +.sandbox-subject-link:hover { + color: #1d4ed8; + text-decoration: underline; +} + +.sandbox-icon { + width: 0.875rem; + height: 0.875rem; +} + +.sandbox-main { + display: flex; + align-items: center; + justify-content: center; +} + +.sandbox-main > * { + width: 100%; +} diff --git a/src/templates/sandbox.html b/src/templates/sandbox.html index 0cf9ffe..5f4e85e 100644 --- a/src/templates/sandbox.html +++ b/src/templates/sandbox.html @@ -3,26 +3,36 @@ 🧑‍💻 Pane Development Sandbox - + -
+
-

🧑‍💻 pane sandbox

-
- +

🧑‍💻 pane sandbox

+
+ @@ -41,12 +51,9 @@

🧑‍💻 p

-
-
- +
+
+ diff --git a/src/vite/plugins/icons.ts b/src/vite/plugins/icons.ts new file mode 100644 index 0000000..3a9e5ed --- /dev/null +++ b/src/vite/plugins/icons.ts @@ -0,0 +1,37 @@ +import type { Options } from 'unplugin-icons'; +import { FileSystemIconLoader } from 'unplugin-icons/loaders'; +import Icons from 'unplugin-icons/vite'; + +const compiler: Options['compiler'] = { + compiler(svg, collection, icon) { + const id = `icon-${collection}-${icon}`; + const className = id.replace(/-/g, ''); + + return ` + export default class ${className} extends HTMLElement { + constructor() { + super() + this.attachShadow({ mode: 'open' }).innerHTML = ${JSON.stringify('' + svg)} + } + } + + if (!customElements.get('${id}')) { + customElements.define('${id}', ${className}) + } + `; + }, +}; + +export default function () { + return Icons({ + scale: 1, + compiler, + customCollections: { + app: FileSystemIconLoader('./src/assets/icons'), + }, + iconCustomizer(_, __, props) { + props.width = '100%'; + props.height = '100%'; + }, + }); +} diff --git a/src/vite/plugins/index.ts b/src/vite/plugins/index.ts index 6ca36d4..0f3f85e 100644 --- a/src/vite/plugins/index.ts +++ b/src/vite/plugins/index.ts @@ -1,9 +1,11 @@ export * from './babel'; export * from './css'; +export * from './icons'; export * from './raw'; export * from './solid-pane'; export { default as babel } from './babel'; export { default as css } from './css'; +export { default as icons } from './icons'; export { default as raw } from './raw'; export { default as solidPane } from './solid-pane'; diff --git a/src/vite/plugins/solid-pane.ts b/src/vite/plugins/solid-pane.ts index 0226c33..c90a27a 100644 --- a/src/vite/plugins/solid-pane.ts +++ b/src/vite/plugins/solid-pane.ts @@ -3,6 +3,7 @@ import type { PluginOption } from 'vite'; import babel from './babel'; import css from './css'; +import icons from './icons'; import paneSandbox from './pane-sandbox'; import type { PaneSandboxPluginOptions } from './pane-sandbox'; import raw from './raw'; @@ -15,6 +16,7 @@ export interface SolidPanePluginOptions { export default function (options: SolidPanePluginOptions): PluginOption[] { return [ css(), + icons(), raw(/\.ttl$/), babel({ litDecoratorPaths: options.litDecoratorPaths }), dts({