@nubisco/ui 4.1.0 → 4.1.2

package/dist/plugins/vite/index.js

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'node:url';
 import Components from 'unplugin-vue-components/vite';
 import { COMPONENT_MANIFEST } from '../../components/manifest.js';
 import { nubiscoGlyphs } from './glyphs.js';
+import { nubiscoImports } from './imports.js';
 /** dist/plugins/vite/index.js → dist */
 const defaultDistRoot = () => path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
 /** Which stylesheets each component needs, recorded by the library's build. */
@@ -19,6 +20,7 @@ export function nubiscoUI(options = {}) {
     const { components = true, glyphs = true, styles = true } = options;
     const componentOptions = typeof components === 'object' ? components : {};
     const plugins = [];
+    let resolvedComponents = 0;
     if (glyphs !== false) {
         plugins.push(nubiscoGlyphs(typeof glyphs === 'object' ? glyphs : {}));
     }
@@ -27,6 +29,15 @@ export function nubiscoUI(options = {}) {
         const styleManifest = styles
             ? loadStyleManifest(options.distRoot ?? defaultDistRoot())
             : {};
+        plugins.push(nubiscoImports({
+            manifest: lookup,
+            styleManifest,
+            styles,
+            packageName: '@nubisco/ui',
+            onResolve: (count) => {
+                resolvedComponents += count;
+            },
+        }));
         plugins.push(Components({
             dirs: componentOptions.dirs ?? [],
             dts: componentOptions.dts ?? 'components.d.ts',
@@ -35,6 +46,7 @@ export function nubiscoUI(options = {}) {
                     const file = lookup.get(name);
                     if (!file)
                         return;
+                    resolvedComponents += 1;
                     const sheets = styleManifest[file] ?? [];
                     return {
                         name,
@@ -44,6 +56,29 @@ export function nubiscoUI(options = {}) {
                 },
             ],
         }));
+        // A build that linked no component at all cannot have linked any component
+        // CSS either, and `styles: true` says the app is relying on this plugin
+        // for it. That combination ships an unstyled app and fails nothing, so it
+        // is worth a line. It is reachable when every usage goes through a
+        // namespace import (`import * as UI from '@nubisco/ui'`), or a dynamic
+        // one, neither of which names the components it uses.
+        if (styles) {
+            plugins.push({
+                name: 'nubisco-ui:styles-check',
+                apply: 'build',
+                closeBundle() {
+                    if (resolvedComponents)
+                        return;
+                    console.warn(`[nubisco-ui] no components were linked in this build, so none of ` +
+                        `the component stylesheets were either. If this app renders ` +
+                        `Nubisco components, it will render unstyled. Import them by ` +
+                        `name (\`import { NbButton } from '@nubisco/ui'\`) or use the ` +
+                        `tags directly so they can be resolved; or pass ` +
+                        `\`nubiscoUI({ styles: false })\` and import ` +
+                        `'@nubisco/ui/css' yourself.`);
+                },
+            });
+        }
     }
     return plugins;
 }

package/dist/styles/InfoHint.css

@@ -1 +1 @@
-.nb-info-hint[data-v-f6f2eaf3]{vertical-align:middle;align-items:center;display:inline-flex}.nb-info-hint--trigger[data-v-f6f2eaf3]{color:var(--nb-c-text-subtle);cursor:help;border-radius:var(--nb-radius-pill);transition:color var(--nb-animation-fast) ease;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.nb-info-hint--trigger[data-v-f6f2eaf3]:hover,.nb-info-hint--trigger.nb-info-hint--trigger-open[data-v-f6f2eaf3]{color:var(--nb-c-text)}.nb-info-hint--trigger[data-v-f6f2eaf3]:focus-visible{outline:2px solid var(--nb-c-focus-ring);outline-offset:2px;color:var(--nb-c-text)}.nb-info-hint--trigger[data-v-f6f2eaf3]:disabled{cursor:default;color:var(--nb-c-component-disabled)}.nb-info-hint--popover[data-v-f6f2eaf3]{z-index:var(--nb-zindex-tooltip);max-width:calc(var(--nb-base-unit) * 34);padding:calc(var(--nb-base-unit) * 1.25) calc(var(--nb-base-unit) * 1.5);border:1px solid var(--nb-c-border);border-radius:var(--nb-radius-md);background:var(--nb-c-surface);color:var(--nb-c-text);box-shadow:0 calc(var(--nb-base-unit) * .5) calc(var(--nb-base-unit) * 2) var(--nb-c-scrim);text-align:left;animation:nb-info-hint-in-f6f2eaf3 var(--nb-animation-fast) ease-out;position:fixed}.nb-info-hint--title[data-v-f6f2eaf3]{margin:0 0 calc(var(--nb-base-unit) * .5);font-family:var(--nb-type-label-md-family);font-size:var(--nb-type-label-md-size);font-weight:var(--nb-type-label-md-weight);line-height:var(--nb-type-label-md-line-height);color:var(--nb-c-text)}.nb-info-hint--body[data-v-f6f2eaf3]{font-family:var(--nb-type-body-sm-family);font-size:var(--nb-type-body-sm-size);font-weight:var(--nb-type-body-sm-weight);line-height:var(--nb-type-body-sm-line-height);color:var(--nb-c-text-muted)}.nb-info-hint--body[data-v-f6f2eaf3] p{margin:0 0 calc(var(--nb-base-unit) * .5)}.nb-info-hint--body[data-v-f6f2eaf3] p:last-child{margin-bottom:0}.nb-info-hint--body[data-v-f6f2eaf3] code{font-family:var(--nb-font-family-mono);font-size:var(--nb-font-size-11)}.nb-info-hint--popover[data-v-f6f2eaf3]:after{content:"";width:var(--nb-base-unit);height:var(--nb-base-unit);background:var(--nb-c-surface);border:1px solid var(--nb-c-border);position:absolute;transform:rotate(45deg)}.nb-info-hint--popover-top[data-v-f6f2eaf3]:after{bottom:calc(var(--nb-base-unit) / -2 - 1px);left:var(--nb-info-hint-arrow-offset,50%);margin-left:calc(var(--nb-base-unit) / -2);border-top:none;border-left:none}.nb-info-hint--popover-bottom[data-v-f6f2eaf3]:after{top:calc(var(--nb-base-unit) / -2 - 1px);left:var(--nb-info-hint-arrow-offset,50%);margin-left:calc(var(--nb-base-unit) / -2);border-bottom:none;border-right:none}.nb-info-hint--popover-left[data-v-f6f2eaf3]:after{right:calc(var(--nb-base-unit) / -2 - 1px);top:var(--nb-info-hint-arrow-offset,50%);margin-top:calc(var(--nb-base-unit) / -2);border-bottom:none;border-left:none}.nb-info-hint--popover-right[data-v-f6f2eaf3]:after{left:calc(var(--nb-base-unit) / -2 - 1px);top:var(--nb-info-hint-arrow-offset,50%);margin-top:calc(var(--nb-base-unit) / -2);border-top:none;border-right:none}@keyframes nb-info-hint-in-f6f2eaf3{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.nb-info-hint--popover[data-v-f6f2eaf3]{animation:none}.nb-info-hint--trigger[data-v-f6f2eaf3]{transition:none}}
+.nb-info-hint[data-v-e7ec3f8e]{vertical-align:middle;align-items:center;display:inline-flex}.nb-info-hint--trigger[data-v-e7ec3f8e]{color:var(--nb-c-text-subtle);cursor:help;border-radius:var(--nb-radius-pill);transition:color var(--nb-animation-fast) ease;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.nb-info-hint--trigger[data-v-e7ec3f8e]:hover,.nb-info-hint--trigger.nb-info-hint--trigger-open[data-v-e7ec3f8e]{color:var(--nb-c-text)}.nb-info-hint--trigger[data-v-e7ec3f8e]:focus-visible{outline:2px solid var(--nb-c-focus-ring);outline-offset:2px;color:var(--nb-c-text)}.nb-info-hint--trigger[data-v-e7ec3f8e]:disabled{cursor:default;color:var(--nb-c-component-disabled)}.nb-info-hint--popover[data-v-e7ec3f8e]{z-index:var(--nb-zindex-tooltip);max-width:calc(var(--nb-base-unit) * 34);padding:calc(var(--nb-base-unit) * 1.25) calc(var(--nb-base-unit) * 1.5);border:1px solid var(--nb-c-border);border-radius:var(--nb-radius-md);background:var(--nb-c-surface);color:var(--nb-c-text);box-shadow:0 calc(var(--nb-base-unit) * .5) calc(var(--nb-base-unit) * 2) var(--nb-c-scrim);text-align:left;animation:nb-info-hint-in-e7ec3f8e var(--nb-animation-fast) ease-out;position:fixed}.nb-info-hint--title[data-v-e7ec3f8e]{margin:0 0 calc(var(--nb-base-unit) * .5);font-family:var(--nb-type-label-md-family);font-size:var(--nb-type-label-md-size);font-weight:var(--nb-type-label-md-weight);line-height:var(--nb-type-label-md-line-height);color:var(--nb-c-text)}.nb-info-hint--body[data-v-e7ec3f8e]{font-family:var(--nb-type-body-sm-family);font-size:var(--nb-type-body-sm-size);font-weight:var(--nb-type-body-sm-weight);line-height:var(--nb-type-body-sm-line-height);color:var(--nb-c-text-muted)}.nb-info-hint--body[data-v-e7ec3f8e] p{margin:0 0 calc(var(--nb-base-unit) * .5)}.nb-info-hint--body[data-v-e7ec3f8e] p:last-child{margin-bottom:0}.nb-info-hint--body[data-v-e7ec3f8e] code{font-family:var(--nb-font-family-mono);font-size:var(--nb-font-size-11)}.nb-info-hint--popover[data-v-e7ec3f8e]:after{content:"";width:var(--nb-base-unit);height:var(--nb-base-unit);background:var(--nb-c-surface);border:1px solid var(--nb-c-border);position:absolute;transform:rotate(45deg)}.nb-info-hint--popover-top[data-v-e7ec3f8e]:after{bottom:calc(var(--nb-base-unit) / -2 - 1px);left:var(--nb-info-hint-arrow-offset,50%);margin-left:calc(var(--nb-base-unit) / -2);border-top:none;border-left:none}.nb-info-hint--popover-bottom[data-v-e7ec3f8e]:after{top:calc(var(--nb-base-unit) / -2 - 1px);left:var(--nb-info-hint-arrow-offset,50%);margin-left:calc(var(--nb-base-unit) / -2);border-bottom:none;border-right:none}.nb-info-hint--popover-left[data-v-e7ec3f8e]:after{right:calc(var(--nb-base-unit) / -2 - 1px);top:var(--nb-info-hint-arrow-offset,50%);margin-top:calc(var(--nb-base-unit) / -2);border-bottom:none;border-left:none}.nb-info-hint--popover-right[data-v-e7ec3f8e]:after{left:calc(var(--nb-base-unit) / -2 - 1px);top:var(--nb-info-hint-arrow-offset,50%);margin-top:calc(var(--nb-base-unit) / -2);border-top:none;border-right:none}@keyframes nb-info-hint-in-e7ec3f8e{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.nb-info-hint--popover[data-v-e7ec3f8e]{animation:none}.nb-info-hint--trigger[data-v-e7ec3f8e]{transition:none}}

package/dist/ui.css

@@ -41,7 +41,7 @@
 .nb-file-uploader[data-v-1adb0140]{flex-direction:column;gap:.75rem;display:flex}.nb-file-uploader__heading[data-v-1adb0140]{color:var(--nb-c-text);margin:0;font-size:1rem;font-weight:600}.nb-file-uploader__description[data-v-1adb0140]{color:var(--nb-c-text-muted);border-left:3px solid var(--nb-c-border);margin:0;padding-left:.75rem;font-size:.875rem;line-height:1.5}.nb-file-uploader__input[data-v-1adb0140]{display:none}.nb-file-uploader__btn[data-v-1adb0140]{align-self:flex-start}.nb-file-uploader__dropzone[data-v-1adb0140]{border:2px dashed var(--nb-c-border);cursor:pointer;text-align:center;border-radius:6px;justify-content:center;align-items:center;padding:2rem 1.5rem;transition:border-color .15s,background .15s;display:flex}.nb-file-uploader__dropzone--primary[data-v-1adb0140]{background:color-mix(in srgb, var(--nb-c-primary) 6%, transparent);border-color:color-mix(in srgb, var(--nb-c-primary) 60%, transparent)}.nb-file-uploader__dropzone--primary .nb-file-uploader__drop-label[data-v-1adb0140]{color:var(--nb-c-primary)}.nb-file-uploader__dropzone--secondary[data-v-1adb0140]{background:color-mix(in srgb, var(--nb-c-secondary) 6%, transparent);border-color:color-mix(in srgb, var(--nb-c-secondary) 60%, transparent)}.nb-file-uploader__dropzone--secondary .nb-file-uploader__drop-label[data-v-1adb0140]{color:var(--nb-c-secondary)}.nb-file-uploader__dropzone--danger[data-v-1adb0140]{background:color-mix(in srgb, var(--nb-c-danger) 6%, transparent);border-color:color-mix(in srgb, var(--nb-c-danger) 60%, transparent)}.nb-file-uploader__dropzone--danger .nb-file-uploader__drop-label[data-v-1adb0140]{color:var(--nb-c-danger)}.nb-file-uploader__dropzone--success[data-v-1adb0140]{background:color-mix(in srgb, var(--nb-c-success) 6%, transparent);border-color:color-mix(in srgb, var(--nb-c-success) 60%, transparent)}.nb-file-uploader__dropzone--success .nb-file-uploader__drop-label[data-v-1adb0140]{color:var(--nb-c-success)}.nb-file-uploader__dropzone--warning[data-v-1adb0140]{background:color-mix(in srgb, var(--nb-c-warning) 6%, transparent);border-color:color-mix(in srgb, var(--nb-c-warning) 60%, transparent)}.nb-file-uploader__dropzone--warning .nb-file-uploader__drop-label[data-v-1adb0140]{color:var(--nb-c-warning)}.nb-file-uploader__drop-label[data-v-1adb0140]{pointer-events:none;font-size:.9rem;line-height:1.6}.nb-file-uploader__list[data-v-1adb0140]{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.nb-file-uploader__item[data-v-1adb0140]{background:var(--nb-c-surface);color:var(--nb-c-text);border:1px solid #0000;border-radius:4px;grid-template-rows:auto auto;grid-template-columns:1fr auto;align-items:center;padding:.6rem .875rem;font-size:.9rem;transition:border-color .15s;display:grid}.nb-file-uploader__item--error[data-v-1adb0140]{border-color:var(--nb-c-danger)}.nb-file-uploader__name[data-v-1adb0140]{white-space:nowrap;text-overflow:ellipsis;grid-area:1/1;padding-right:.5rem;overflow:hidden}.nb-file-uploader__status[data-v-1adb0140]{grid-area:1/2;align-items:center;gap:.25rem;display:flex}.nb-file-uploader__error[data-v-1adb0140]{color:var(--nb-c-danger);border-top:1px solid var(--nb-c-border);grid-area:2/1/auto/-1;margin-top:.35rem;padding-top:.35rem;font-size:.8125rem}.nb-file-uploader__remove[data-v-1adb0140]{cursor:pointer;color:var(--nb-c-text-muted);background:0 0;border:none;align-items:center;padding:0;line-height:1;display:flex}.nb-file-uploader__remove[data-v-1adb0140]:hover{color:var(--nb-c-text)}.nb-file-uploader__spinner[data-v-1adb0140]{color:var(--nb-c-primary);animation:.8s linear infinite nb-spin-1adb0140}.nb-file-uploader__check[data-v-1adb0140]{color:var(--nb-c-primary)}.nb-file-uploader__warn[data-v-1adb0140]{color:var(--nb-c-danger)}@keyframes nb-spin-1adb0140{to{transform:rotate(360deg)}}
 .nb-flag[data-v-7bdc2000]{height:fit-content;line-height:1em;display:flex;position:relative}.nb-flag[data-v-7bdc2000]:not(.box-clickable){pointer-events:none}.nb-flag--lg[data-v-7bdc2000]{width:32px;max-width:32px;max-height:32px}.nb-flag--md[data-v-7bdc2000]{width:20px;max-width:20px;max-height:20px}.nb-flag--sm[data-v-7bdc2000]{width:16px;max-width:16px;max-height:16px}
 .nb-image-cropper[data-v-29cde507]{-webkit-user-select:none;user-select:none;max-width:100%;height:auto;display:inline-block;position:relative;overflow:hidden}.nb-image-cropper .canvas-container[data-v-29cde507]{width:100%;height:auto;display:inline-block;position:relative}.nb-image-cropper .canvas-container canvas[data-v-29cde507]{max-width:100%;height:auto;display:block}.nb-image-cropper .resize-handle[data-v-29cde507]{background:var(--nb-c-surface);border:1px solid var(--nb-c-border);z-index:1;width:10px;height:10px;position:absolute}.nb-image-cropper .resize-handle.top-left[data-v-29cde507]{cursor:nwse-resize}.nb-image-cropper .resize-handle.top[data-v-29cde507]{cursor:ns-resize}.nb-image-cropper .resize-handle.top-right[data-v-29cde507]{cursor:nesw-resize}.nb-image-cropper .resize-handle.right[data-v-29cde507]{cursor:ew-resize}.nb-image-cropper .resize-handle.bottom-right[data-v-29cde507]{cursor:nwse-resize}.nb-image-cropper .resize-handle.bottom[data-v-29cde507]{cursor:ns-resize}.nb-image-cropper .resize-handle.bottom-left[data-v-29cde507]{cursor:nesw-resize}.nb-image-cropper .resize-handle.left[data-v-29cde507]{cursor:ew-resize}.nb-image-cropper .cropped-image-preview[data-v-29cde507]{right:calc(var(--nb-base-unit,8px) * 2);bottom:calc(var(--nb-base-unit,8px) * 2);border-radius:var(--nb-border-radius-sm,6px);height:calc(var(--nb-base-unit,8px) * 14);border:dotted 1px var(--nb-c-border);background:var(--nb-c-surface);-webkit-user-select:none;user-select:none;pointer-events:none;margin-top:20px;position:absolute;overflow:hidden}.nb-image-cropper .cropped-image-preview ul[data-v-29cde507]{min-width:calc(var(--nb-base-unit,8px) * 9);background:var(--nb-c-contrast);color:var(--nb-c-surface);font-size:var(--nb-font-size-10,10px);padding:calc(var(--nb-base-unit,8px) / 2);line-height:var(--nb-font-size-14,14px)}.nb-image-cropper .cropped-image-preview img[data-v-29cde507]{object-fit:contain;object-position:center;width:100%;height:100%}
-.nb-info-hint[data-v-f6f2eaf3]{vertical-align:middle;align-items:center;display:inline-flex}.nb-info-hint--trigger[data-v-f6f2eaf3]{color:var(--nb-c-text-subtle);cursor:help;border-radius:var(--nb-radius-pill);transition:color var(--nb-animation-fast) ease;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.nb-info-hint--trigger[data-v-f6f2eaf3]:hover,.nb-info-hint--trigger.nb-info-hint--trigger-open[data-v-f6f2eaf3]{color:var(--nb-c-text)}.nb-info-hint--trigger[data-v-f6f2eaf3]:focus-visible{outline:2px solid var(--nb-c-focus-ring);outline-offset:2px;color:var(--nb-c-text)}.nb-info-hint--trigger[data-v-f6f2eaf3]:disabled{cursor:default;color:var(--nb-c-component-disabled)}.nb-info-hint--popover[data-v-f6f2eaf3]{z-index:var(--nb-zindex-tooltip);max-width:calc(var(--nb-base-unit) * 34);padding:calc(var(--nb-base-unit) * 1.25) calc(var(--nb-base-unit) * 1.5);border:1px solid var(--nb-c-border);border-radius:var(--nb-radius-md);background:var(--nb-c-surface);color:var(--nb-c-text);box-shadow:0 calc(var(--nb-base-unit) * .5) calc(var(--nb-base-unit) * 2) var(--nb-c-scrim);text-align:left;animation:nb-info-hint-in-f6f2eaf3 var(--nb-animation-fast) ease-out;position:fixed}.nb-info-hint--title[data-v-f6f2eaf3]{margin:0 0 calc(var(--nb-base-unit) * .5);font-family:var(--nb-type-label-md-family);font-size:var(--nb-type-label-md-size);font-weight:var(--nb-type-label-md-weight);line-height:var(--nb-type-label-md-line-height);color:var(--nb-c-text)}.nb-info-hint--body[data-v-f6f2eaf3]{font-family:var(--nb-type-body-sm-family);font-size:var(--nb-type-body-sm-size);font-weight:var(--nb-type-body-sm-weight);line-height:var(--nb-type-body-sm-line-height);color:var(--nb-c-text-muted)}.nb-info-hint--body[data-v-f6f2eaf3] p{margin:0 0 calc(var(--nb-base-unit) * .5)}.nb-info-hint--body[data-v-f6f2eaf3] p:last-child{margin-bottom:0}.nb-info-hint--body[data-v-f6f2eaf3] code{font-family:var(--nb-font-family-mono);font-size:var(--nb-font-size-11)}.nb-info-hint--popover[data-v-f6f2eaf3]:after{content:"";width:var(--nb-base-unit);height:var(--nb-base-unit);background:var(--nb-c-surface);border:1px solid var(--nb-c-border);position:absolute;transform:rotate(45deg)}.nb-info-hint--popover-top[data-v-f6f2eaf3]:after{bottom:calc(var(--nb-base-unit) / -2 - 1px);left:var(--nb-info-hint-arrow-offset,50%);margin-left:calc(var(--nb-base-unit) / -2);border-top:none;border-left:none}.nb-info-hint--popover-bottom[data-v-f6f2eaf3]:after{top:calc(var(--nb-base-unit) / -2 - 1px);left:var(--nb-info-hint-arrow-offset,50%);margin-left:calc(var(--nb-base-unit) / -2);border-bottom:none;border-right:none}.nb-info-hint--popover-left[data-v-f6f2eaf3]:after{right:calc(var(--nb-base-unit) / -2 - 1px);top:var(--nb-info-hint-arrow-offset,50%);margin-top:calc(var(--nb-base-unit) / -2);border-bottom:none;border-left:none}.nb-info-hint--popover-right[data-v-f6f2eaf3]:after{left:calc(var(--nb-base-unit) / -2 - 1px);top:var(--nb-info-hint-arrow-offset,50%);margin-top:calc(var(--nb-base-unit) / -2);border-top:none;border-right:none}@keyframes nb-info-hint-in-f6f2eaf3{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.nb-info-hint--popover[data-v-f6f2eaf3]{animation:none}.nb-info-hint--trigger[data-v-f6f2eaf3]{transition:none}}
+.nb-info-hint[data-v-e7ec3f8e]{vertical-align:middle;align-items:center;display:inline-flex}.nb-info-hint--trigger[data-v-e7ec3f8e]{color:var(--nb-c-text-subtle);cursor:help;border-radius:var(--nb-radius-pill);transition:color var(--nb-animation-fast) ease;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.nb-info-hint--trigger[data-v-e7ec3f8e]:hover,.nb-info-hint--trigger.nb-info-hint--trigger-open[data-v-e7ec3f8e]{color:var(--nb-c-text)}.nb-info-hint--trigger[data-v-e7ec3f8e]:focus-visible{outline:2px solid var(--nb-c-focus-ring);outline-offset:2px;color:var(--nb-c-text)}.nb-info-hint--trigger[data-v-e7ec3f8e]:disabled{cursor:default;color:var(--nb-c-component-disabled)}.nb-info-hint--popover[data-v-e7ec3f8e]{z-index:var(--nb-zindex-tooltip);max-width:calc(var(--nb-base-unit) * 34);padding:calc(var(--nb-base-unit) * 1.25) calc(var(--nb-base-unit) * 1.5);border:1px solid var(--nb-c-border);border-radius:var(--nb-radius-md);background:var(--nb-c-surface);color:var(--nb-c-text);box-shadow:0 calc(var(--nb-base-unit) * .5) calc(var(--nb-base-unit) * 2) var(--nb-c-scrim);text-align:left;animation:nb-info-hint-in-e7ec3f8e var(--nb-animation-fast) ease-out;position:fixed}.nb-info-hint--title[data-v-e7ec3f8e]{margin:0 0 calc(var(--nb-base-unit) * .5);font-family:var(--nb-type-label-md-family);font-size:var(--nb-type-label-md-size);font-weight:var(--nb-type-label-md-weight);line-height:var(--nb-type-label-md-line-height);color:var(--nb-c-text)}.nb-info-hint--body[data-v-e7ec3f8e]{font-family:var(--nb-type-body-sm-family);font-size:var(--nb-type-body-sm-size);font-weight:var(--nb-type-body-sm-weight);line-height:var(--nb-type-body-sm-line-height);color:var(--nb-c-text-muted)}.nb-info-hint--body[data-v-e7ec3f8e] p{margin:0 0 calc(var(--nb-base-unit) * .5)}.nb-info-hint--body[data-v-e7ec3f8e] p:last-child{margin-bottom:0}.nb-info-hint--body[data-v-e7ec3f8e] code{font-family:var(--nb-font-family-mono);font-size:var(--nb-font-size-11)}.nb-info-hint--popover[data-v-e7ec3f8e]:after{content:"";width:var(--nb-base-unit);height:var(--nb-base-unit);background:var(--nb-c-surface);border:1px solid var(--nb-c-border);position:absolute;transform:rotate(45deg)}.nb-info-hint--popover-top[data-v-e7ec3f8e]:after{bottom:calc(var(--nb-base-unit) / -2 - 1px);left:var(--nb-info-hint-arrow-offset,50%);margin-left:calc(var(--nb-base-unit) / -2);border-top:none;border-left:none}.nb-info-hint--popover-bottom[data-v-e7ec3f8e]:after{top:calc(var(--nb-base-unit) / -2 - 1px);left:var(--nb-info-hint-arrow-offset,50%);margin-left:calc(var(--nb-base-unit) / -2);border-bottom:none;border-right:none}.nb-info-hint--popover-left[data-v-e7ec3f8e]:after{right:calc(var(--nb-base-unit) / -2 - 1px);top:var(--nb-info-hint-arrow-offset,50%);margin-top:calc(var(--nb-base-unit) / -2);border-bottom:none;border-left:none}.nb-info-hint--popover-right[data-v-e7ec3f8e]:after{left:calc(var(--nb-base-unit) / -2 - 1px);top:var(--nb-info-hint-arrow-offset,50%);margin-top:calc(var(--nb-base-unit) / -2);border-top:none;border-right:none}@keyframes nb-info-hint-in-e7ec3f8e{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.nb-info-hint--popover[data-v-e7ec3f8e]{animation:none}.nb-info-hint--trigger[data-v-e7ec3f8e]{transition:none}}
 .nb-inline-edit__text[data-v-d602ce76]{align-items:baseline;gap:calc(var(--nb-base-unit) * .75);max-width:100%;padding:calc(var(--nb-base-unit) * .25) calc(var(--nb-base-unit) * .75);margin:0;border-radius:var(--nb-radius-sm);color:inherit;text-align:start;cursor:text;background:0 0;border:0;margin-inline-start:calc(var(--nb-base-unit) * -.75);display:inline-flex}.nb-inline-edit__text span[data-v-d602ce76]{overflow-wrap:anywhere}.nb-inline-edit__text .nb-inline-edit__pencil[data-v-d602ce76]{color:var(--nb-c-text-subtle);opacity:0;flex:none;align-self:center;transition:opacity .12s}.nb-inline-edit__text[data-v-d602ce76]:hover:not(.is-disabled){background:var(--nb-c-surface-hover)}.nb-inline-edit__text:hover:not(.is-disabled) .nb-inline-edit__pencil[data-v-d602ce76]{opacity:1}.nb-inline-edit__text[data-v-d602ce76]:focus-visible{outline:2px solid var(--nb-c-focus-ring,var(--nb-c-primary));outline-offset:1px}.nb-inline-edit__text:focus-visible .nb-inline-edit__pencil[data-v-d602ce76]{opacity:1}.nb-inline-edit__text.is-disabled[data-v-d602ce76]{cursor:default}.nb-inline-edit__placeholder[data-v-d602ce76]{color:var(--nb-c-text-subtle)}.nb-inline-edit__input[data-v-d602ce76]{width:100%;padding:calc(var(--nb-base-unit) * .25) calc(var(--nb-base-unit) * .75);border:1px solid var(--nb-c-primary);border-radius:var(--nb-radius-sm);background:var(--nb-c-surface);color:inherit;margin:0;margin-inline-start:calc(var(--nb-base-unit) * -.75)}.nb-inline-edit__input[data-v-d602ce76]:focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--nb-c-primary) 30%, transparent);outline:none}.nb-inline-edit__text--md[data-v-d602ce76],.nb-inline-edit__input--md[data-v-d602ce76]{font-family:var(--nb-type-body-md-family,var(--nb-font-family-sans));font-size:var(--nb-type-body-md-size);font-weight:var(--nb-type-body-md-weight);line-height:var(--nb-type-body-md-line-height);letter-spacing:var(--nb-type-body-md-letter-spacing,normal)}.nb-inline-edit__text--lg[data-v-d602ce76],.nb-inline-edit__input--lg[data-v-d602ce76]{font-family:var(--nb-type-heading-01-family,var(--nb-font-family-sans));font-size:var(--nb-type-heading-01-size);font-weight:var(--nb-type-heading-01-weight);line-height:var(--nb-type-heading-01-line-height);letter-spacing:var(--nb-type-heading-01-letter-spacing,normal)}.nb-inline-edit__text--xl[data-v-d602ce76],.nb-inline-edit__input--xl[data-v-d602ce76]{font-family:var(--nb-type-heading-02-family,var(--nb-font-family-sans));font-size:var(--nb-type-heading-02-size);font-weight:var(--nb-type-heading-02-weight);line-height:var(--nb-type-heading-02-line-height);letter-spacing:var(--nb-type-heading-02-letter-spacing,normal)}
 .nb-spinner[data-v-55d1147d]{align-items:center;gap:var(--nb-base-unit);font-family:var(--nb-font-family-sans);color:var(--nb-c-primary);--nb-spinner-diameter:calc(var(--nb-field-height-md) / 2);display:inline-flex}.nb-spinner--xs[data-v-55d1147d]{--nb-spinner-diameter:calc(var(--nb-field-height-xs) / 2)}.nb-spinner--sm[data-v-55d1147d]{--nb-spinner-diameter:calc(var(--nb-field-height-sm) / 2)}.nb-spinner--md[data-v-55d1147d]{--nb-spinner-diameter:calc(var(--nb-field-height-md) / 2)}.nb-spinner--lg[data-v-55d1147d]{--nb-spinner-diameter:calc(var(--nb-field-height-lg) / 2)}.nb-spinner--tone-inherit[data-v-55d1147d]{color:inherit}.nb-spinner__ring[data-v-55d1147d]{width:var(--nb-spinner-diameter);height:var(--nb-spinner-diameter);flex-shrink:0;display:block}.nb-spinner__track[data-v-55d1147d],.nb-spinner__arc[data-v-55d1147d]{fill:none;stroke-width:4px}.nb-spinner__track[data-v-55d1147d]{stroke:var(--nb-c-discrete)}.nb-spinner__arc[data-v-55d1147d]{stroke:currentColor;stroke-linecap:round;stroke-dasharray:22 66;transform-origin:50%;animation:.9s linear infinite nb-spinner-spin-55d1147d}.nb-spinner__actions[data-v-55d1147d]{gap:var(--nb-base-unit);margin-top:var(--nb-base-unit);align-items:center;display:flex}.nb-spinner__label[data-v-55d1147d]{font-size:var(--nb-font-size-12);color:var(--nb-c-text-muted);line-height:1.4}.nb-spinner__announcement[data-v-55d1147d]{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.nb-spinner--overlay-container[data-v-55d1147d],.nb-spinner--overlay-page[data-v-55d1147d]{gap:var(--nb-base-unit);background:var(--nb-c-scrim);flex-direction:column;justify-content:center;align-items:center;display:flex}.nb-spinner--overlay-container .nb-spinner__label[data-v-55d1147d],.nb-spinner--overlay-page .nb-spinner__label[data-v-55d1147d]{color:var(--nb-c-white)}.nb-spinner--overlay-container[data-v-55d1147d]{z-index:var(--nb-zindex-pageheader);position:absolute;inset:0}.nb-spinner--overlay-page[data-v-55d1147d]{z-index:var(--nb-zindex-modal);position:fixed;inset:0}.nb-spinner--overlay-page.nb-spinner--overlay-stacked[data-v-55d1147d]{background:0 0}.nb-spinner--overlay-page[data-v-55d1147d]:focus{outline:none}@keyframes nb-spinner-spin-55d1147d{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.nb-spinner .nb-spinner__arc[data-v-55d1147d]{stroke-dasharray:none;animation:1.6s ease-in-out infinite nb-spinner-breathe-55d1147d}}.nb-spinner--reduced-motion .nb-spinner__arc[data-v-55d1147d]{stroke-dasharray:none;animation:1.6s ease-in-out infinite nb-spinner-breathe-55d1147d}@keyframes nb-spinner-breathe-55d1147d{0%,to{stroke-opacity:.25}50%{stroke-opacity:1}}@media (forced-colors:active){.nb-spinner[data-v-55d1147d]{color:canvastext}.nb-spinner .nb-spinner__arc[data-v-55d1147d]{forced-color-adjust:none;stroke:canvastext}.nb-spinner .nb-spinner__track[data-v-55d1147d]{forced-color-adjust:none;stroke:canvas}.nb-spinner.nb-spinner--overlay-container[data-v-55d1147d],.nb-spinner.nb-spinner--overlay-page[data-v-55d1147d]{outline-offset:-1px;background:canvas;outline:1px solid canvastext}.nb-spinner .nb-spinner__label[data-v-55d1147d]{color:canvastext}}
 .nb-inline-loading[data-v-077014e8]{gap:calc(var(--nb-base-unit) / 2);min-height:var(--nb-field-height-sm);font-family:var(--nb-font-family-sans);font-size:var(--nb-font-size-12);color:var(--nb-c-text-muted);align-items:center;line-height:1.4;display:inline-flex}.nb-inline-loading__spinner[data-v-077014e8],.nb-inline-loading__icon[data-v-077014e8]{flex-shrink:0}.nb-inline-loading__text[data-v-077014e8]{min-width:var(--nb-inline-loading-reserve,0)}.nb-inline-loading--finished[data-v-077014e8]{color:var(--nb-c-success)}.nb-inline-loading--error[data-v-077014e8]{color:var(--nb-c-danger)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubisco/ui",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "Vue 3 UI component library",
   "packageManager": "pnpm@11.0.8",
   "repository": {
@@ -140,7 +140,7 @@
     "build:lib": "vite build",
     "build:types": "vue-tsc --noEmit false --declaration --emitDeclarationOnly --outDir dist && node scripts/copy-type-modules.mjs && node scripts/rewrite-dist-aliases.mjs dist",
     "build:plugins": "tsc --project tsconfig.plugins.json",
-    "verify:types": "pnpm run verify:dist-types && pnpm run verify:consumer-types && pnpm run verify:consumer-globals && pnpm run verify:resolution && pnpm run verify:styles",
+    "verify:types": "pnpm run verify:dist-types && pnpm run verify:consumer-types && pnpm run verify:consumer-globals && pnpm run verify:resolution && pnpm run verify:styles && pnpm run verify:glyph-defaults",
     "verify:dist-types": "node scripts/verify-dist-types.mjs dist",
     "verify:consumer-types": "node scripts/verify-consumer-types.mjs",
     "verify:consumer-globals": "node scripts/verify-consumer-globals.mjs",
@@ -161,7 +161,8 @@
     "verify:marks": "node scripts/verify-inlined-marks.mjs",
     "generate": "node scripts/generate-component-manifest.mjs && node scripts/generate-assets.mjs && node scripts/generate-entries.mjs",
     "verify:resolution": "node scripts/verify-compile-time-resolution.mjs dist",
-    "verify:styles": "node scripts/verify-style-split.mjs dist"
+    "verify:styles": "node scripts/verify-style-split.mjs dist",
+    "verify:glyph-defaults": "node scripts/verify-default-glyphs.mjs dist"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged && pnpm run quality:check",

package/src/plugins/vite/glyphs.ts

@@ -3,7 +3,7 @@ import { existsSync } from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import MagicString from 'magic-string'
-import { parse } from 'vue/compiler-sfc'
+import { parse, babelParse } from 'vue/compiler-sfc'
 
 /**
  * Resolves icon and flag artwork at compile time.
@@ -63,6 +63,15 @@ export interface IGlyphOptions {
   packageName?: string
   /** Log every rewrite. Useful when auditing what a page actually links. */
   verbose?: boolean
+  /**
+   * Warn when a glyph forwarded through another component (`<NbButton
+   * :icon="…">`) is a value this plugin cannot see through, so no artwork was
+   * linked for it. On by default, once per file, because the alternative is
+   * the silence that lets an icon reach `NbIcon` with nothing to resolve it
+   * against. Turn it off in a codebase where those bindings are deliberate
+   * pass-through props, resolved by whoever passes them in.
+   */
+  warnUnresolved?: boolean
 }
 
 type TKind = 'icon' | 'flag'
@@ -136,6 +145,99 @@ function staticWeight(element: any): string | undefined {
   return 'regular'
 }
 
+/**
+ * Parse one template expression on its own. `babelParse` wants a program, so
+ * the expression is wrapped; a binding Vue accepts but Babel cannot read is
+ * simply unknown, which the caller treats as unresolved.
+ */
+function parseExpression(expression: string): any {
+  try {
+    const { program } = babelParse(`(${expression})`, {
+      sourceType: 'module',
+      plugins: ['typescript'],
+    })
+    const statement: any = program.body[0]
+    return statement?.type === 'ExpressionStatement'
+      ? statement.expression
+      : undefined
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * Whether every value this expression can hand to the component is artwork the
+ * bundle already links: a literal this plugin just rewrote, or a glyph module
+ * the file imported itself.
+ *
+ * The point is what it refuses. `open ? 'caret-up' : 'caret-down'` produces one
+ * of two rewritten literals and nothing else, so it is resolved. `block?.icon
+ * || 'cube'` also contains a rewritten literal, but it can just as easily
+ * produce `block.icon`, which is a runtime value and needs the catalogue.
+ * Judging by "a rewritten literal appears and no quoted string survives" called
+ * that second one resolved, which meant adding a literal fallback silently
+ * removed the coverage the same expression had without one.
+ */
+function producesOnlyLinkedGlyphs(
+  node: any,
+  isLinked: (name: string) => boolean,
+): boolean {
+  if (!node) return false
+  const recurse = (child: any) => producesOnlyLinkedGlyphs(child, isLinked)
+  switch (node.type) {
+    case 'Identifier':
+      return isLinked(node.name)
+    // The test is not a value the prop receives; the two arms are.
+    case 'ConditionalExpression':
+      return recurse(node.consequent) && recurse(node.alternate)
+    // `a || b`, `a ?? b` and `a && b` can all produce either side.
+    case 'LogicalExpression':
+      return recurse(node.left) && recurse(node.right)
+    case 'SequenceExpression':
+      return recurse(node.expressions[node.expressions.length - 1])
+    case 'TSAsExpression':
+    case 'TSNonNullExpression':
+    case 'TSSatisfiesExpression':
+    case 'ParenthesizedExpression':
+      return recurse(node.expression)
+    default:
+      return false
+  }
+}
+
+/**
+ * Local names bound to glyph modules by the file's own imports, so that
+ * `<NbIcon :name="GithubLogo" />` is understood as already-linked artwork
+ * rather than as a runtime name needing the whole catalogue.
+ */
+function glyphImportLocals(script: string, packageName: string): Set<string> {
+  const locals = new Set<string>()
+  const from = packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const pattern = new RegExp(
+    `import\\s+([^;'"\n]+?)\\s+from\\s*['"]${from}/(?:icons|flags)/[^'"]+['"]`,
+    'g',
+  )
+  for (const match of script.matchAll(pattern)) {
+    const clause = match[1]
+    const namespace = clause.match(/\*\s+as\s+(\w+)/)
+    if (namespace) locals.add(namespace[1])
+    const defaultImport = clause.match(/^\s*(\w+)/)
+    if (defaultImport) locals.add(defaultImport[1])
+    const named = clause.match(/\{([^}]*)\}/)
+    if (named) {
+      for (const part of named[1].split(',')) {
+        const local = part
+          .trim()
+          .split(/\s+as\s+/)
+          .pop()
+          ?.trim()
+        if (local) locals.add(local)
+      }
+    }
+  }
+  return locals
+}
+
 function staticPropKind(
   name: string,
   isIcon: boolean,
@@ -157,6 +259,7 @@ export function nubiscoGlyphs(options: IGlyphOptions = {}) {
     flags = true,
     packageName = '@nubisco/ui',
     verbose = false,
+    warnUnresolved = true,
   } = options
 
   const glyphRoot = options.glyphRoot ?? defaultGlyphRoot()
@@ -186,6 +289,16 @@ export function nubiscoGlyphs(options: IGlyphOptions = {}) {
       const edits: IEdit[] = []
       const used = new Map<string, IGlyphImport>()
       const catalogsNeeded = new Set<TKind>()
+      const unresolvedForwards: { tag: string; prop: string; exp: string }[] =
+        []
+
+      // Artwork the file already imports by hand counts as linked: binding an
+      // imported module is the documented no-plugin path, and pulling a
+      // catalogue in on top of it would be pure waste.
+      const glyphLocals = glyphImportLocals(
+        `${descriptor.scriptSetup?.content ?? ''}\n${descriptor.script?.content ?? ''}`,
+        packageName,
+      )
 
       const use = (glyph: IGlyphImport) => {
         const variable = identifierFor(glyph)
@@ -229,17 +342,18 @@ export function nubiscoGlyphs(options: IGlyphOptions = {}) {
             continue
           }
 
-          /* ---- bound: :name="…" on NbIcon / NbFlag --------------------- */
+          /* ---- bound: :name="…", :icon="…", :flag="…" ------------------ */
           if (
             prop.type === NODE_DIRECTIVE &&
             prop.name === 'bind' &&
             prop.arg?.type === EXPR_SIMPLE &&
-            prop.exp?.type === EXPR_SIMPLE &&
-            (isIcon || isFlag)
+            prop.exp?.type === EXPR_SIMPLE
           ) {
-            const kind: TKind = isIcon ? 'icon' : 'flag'
-            if (!enabled(kind)) continue
-            if (!['name', 'icon', 'flag'].includes(prop.arg.content)) continue
+            // Same rule as the static branch, so `:icon="a ? 'check' : 'copy'"`
+            // links the two icons whether it is written on NbIcon or forwarded
+            // through NbButton. Only the tag decides the kind.
+            const kind = staticPropKind(prop.arg.content, isIcon, isFlag)
+            if (!kind || !enabled(kind)) continue
 
             const expression: string = prop.exp.content
             const rewritten = expression.replace(
@@ -262,16 +376,52 @@ export function nubiscoGlyphs(options: IGlyphOptions = {}) {
               })
             }
 
-            // Considered resolved when every value the expression can produce
-            // is one of the modules just imported: at least one appears, and
-            // no string literal survived that could not be accounted for.
-            const resolved =
-              rewritten.includes('__nb_') && !/['"]/.test(rewritten)
-            if (!resolved) catalogsNeeded.add(kind)
+            const resolved = producesOnlyLinkedGlyphs(
+              parseExpression(rewritten),
+              (identifier) =>
+                used.has(identifier) || glyphLocals.has(identifier),
+            )
+            if (resolved) continue
+
+            // On NbIcon or NbFlag an unresolvable name is fatal at first
+            // render, so the catalogue is the only thing that can save it. On
+            // a forwarding component the same expression may just as well be
+            // a module arriving as a prop, and linking 1,500 icons on that
+            // guess would make the common wrapper the most expensive file in
+            // the bundle. So that case is reported rather than paid for.
+            if (isIcon || isFlag) catalogsNeeded.add(kind)
+            else
+              unresolvedForwards.push({
+                tag,
+                prop: prop.arg.content,
+                exp: expression,
+              })
           }
         }
       })
 
+      // One line per file, however many bindings it has: this is a note about
+      // the file, and repeating the same advice per expression would train
+      // people to skip it.
+      if (warnUnresolved && unresolvedForwards.length) {
+        const kinds = new Set(unresolvedForwards.map((f) => f.prop))
+        const register = kinds.has('flag')
+          ? 'registerFlags()'
+          : 'registerIcons()'
+        const catalogue = `${packageName}/${kinds.has('flag') ? 'flags' : 'icons'}/all`
+        console.warn(
+          `[nubisco-ui] ${path.relative(process.cwd(), file)}: no artwork ` +
+            `linked for ` +
+            unresolvedForwards
+              .map((f) => `<${f.tag} :${f.prop}="${f.exp}">`)
+              .join(', ') +
+            `. The value is only known at runtime, so it will throw on first ` +
+            `render unless something resolves it: ${register} for a known ` +
+            `set, or import '${catalogue}' in this file. Nothing to do if ` +
+            `these are pass-through props (set warnUnresolved: false).`,
+        )
+      }
+
       if (!used.size && !catalogsNeeded.size) return
 
       const imports: string[] = []

package/src/plugins/vite/imports.ts

@@ -0,0 +1,192 @@
+import MagicString from 'magic-string'
+import { parse, babelParse } from 'vue/compiler-sfc'
+
+/**
+ * Makes a hand-written component import behave like an auto-imported one.
+ *
+ * The library ships one stylesheet per chunk, and the auto-import resolver
+ * declares each component's sheets as side effects so the bundler links them
+ * next to the component. That only happens for tags the resolver saw. An app
+ * that writes its imports by hand:
+ *
+ * ```ts
+ * import { NbButton, NbPanel } from '@nubisco/ui'
+ * ```
+ *
+ * never went through the resolver, so it got no stylesheets at all. With
+ * `styles: true` (the default) and the `@nubisco/ui/css` import dropped, as
+ * the upgrade guide said to, that shipped an app with no component CSS: every
+ * page rendered unstyled, and nothing failed. The CSS bundle still looked
+ * plausible, because the app's own styles and the design tokens were still in
+ * it.
+ *
+ * So this plugin gives the same treatment to imports the app wrote itself:
+ *
+ * 1. A named component imported from the barrel is rewritten to its own entry
+ *    point, which is what the resolver would have emitted, and which also
+ *    stops the barrel from pulling in every other component.
+ * 2. Either way, that component's stylesheets are imported alongside it.
+ *
+ * Names the manifest does not know (composables, types, `registerIcons`) stay
+ * on the barrel import untouched, and a namespace or default import is left
+ * alone entirely, since there is no way to tell from it which components the
+ * file actually uses.
+ */
+
+interface INubiscoImportOptions {
+  /** `Nb*` name to entry file, from the component manifest. */
+  manifest: Map<string, string>
+  /** Which stylesheets each component entry needs. */
+  styleManifest: Record<string, string[]>
+  /** Inject stylesheets. When false this plugin only rewrites imports. */
+  styles: boolean
+  packageName: string
+  /** Called with the number of components resolved in a file. */
+  onResolve: (count: number) => void
+}
+
+interface IScriptBlock {
+  content: string
+  offset: number
+}
+
+/** The script of a `.vue` file, or the whole module for a plain script. */
+function scriptBlocks(code: string, file: string): IScriptBlock[] {
+  if (!file.endsWith('.vue')) return [{ content: code, offset: 0 }]
+  const { descriptor, errors } = parse(code, { filename: file })
+  if (errors.length) return []
+  return [descriptor.script, descriptor.scriptSetup]
+    .filter((block): block is NonNullable<typeof block> => Boolean(block))
+    .map((block) => ({
+      content: block.content,
+      offset: block.loc.start.offset,
+    }))
+}
+
+interface ISpecifier {
+  imported: string
+  local: string
+}
+
+export function nubiscoImports(options: INubiscoImportOptions) {
+  const { manifest, styleManifest, styles, packageName, onResolve } = options
+  const componentPrefix = `${packageName}/components/`
+
+  return {
+    name: 'nubisco-ui:imports',
+    enforce: 'pre' as const,
+
+    transform(code: string, id: string) {
+      const file = id.split('?')[0]
+      if (file.includes('/node_modules/')) return
+      if (!/\.(vue|[cm]?[jt]sx?)$/.test(file)) return
+      if (!code.includes(packageName)) return
+
+      const magic = new MagicString(code)
+      const sheetsSeen = new Set<string>()
+      let resolved = 0
+      let changed = false
+
+      // Stylesheets are appended after the import they belong to, so they
+      // land in the consumer's module graph in the order the resolver would
+      // have produced.
+      const sheetsFor = (entry: string) => {
+        if (!styles) return ''
+        const sheets = (styleManifest[entry] ?? []).filter(
+          (sheet) => !sheetsSeen.has(sheet),
+        )
+        sheets.forEach((sheet) => sheetsSeen.add(sheet))
+        return sheets
+          .map((sheet) => `\nimport '${packageName}/dist/${sheet}'`)
+          .join('')
+      }
+
+      for (const block of scriptBlocks(code, file)) {
+        let program
+        try {
+          program = babelParse(block.content, {
+            sourceType: 'module',
+            plugins: ['typescript', 'jsx'],
+          }).program
+        } catch {
+          // Not parseable on its own: the Vue plugin will report it.
+          continue
+        }
+
+        for (const node of program.body as any[]) {
+          if (node.type !== 'ImportDeclaration') continue
+          // `import type { … }` links nothing at runtime, so it needs no
+          // stylesheet and must not be rewritten into a value import.
+          if (node.importKind === 'type') continue
+          const source: string = node.source.value
+          const start = block.offset + node.start
+          const end = block.offset + node.end
+
+          /* An entry point the app already named: it only needs its styles. */
+          if (source.startsWith(componentPrefix)) {
+            const entry = source.slice(componentPrefix.length)
+            const sheets = sheetsFor(entry)
+            resolved += 1
+            if (sheets) {
+              magic.appendRight(end, sheets)
+              changed = true
+            }
+            continue
+          }
+
+          if (source !== packageName) continue
+
+          const components: ISpecifier[] = []
+          const rest: string[] = []
+          let splittable = true
+
+          for (const specifier of node.specifiers as any[]) {
+            if (specifier.type !== 'ImportSpecifier') {
+              // A default or namespace import says nothing about which
+              // components the file uses, so it stays as it is.
+              splittable = false
+              break
+            }
+            const imported: string =
+              specifier.imported.name ?? specifier.imported.value
+            const local: string = specifier.local.name
+            if (specifier.importKind === 'type' || !manifest.has(imported)) {
+              rest.push(
+                block.content.slice(specifier.start, specifier.end).trim(),
+              )
+              continue
+            }
+            components.push({ imported, local })
+          }
+
+          if (!splittable || !components.length) continue
+
+          const lines = components.map(({ imported, local }) => {
+            const entry = manifest.get(imported) as string
+            const binding =
+              imported === local ? imported : `${imported} as ${local}`
+            return (
+              `import { ${binding} } from '${componentPrefix}${entry}'` +
+              sheetsFor(entry)
+            )
+          })
+          if (rest.length) {
+            lines.push(`import { ${rest.join(', ')} } from '${source}'`)
+          }
+
+          resolved += components.length
+          magic.overwrite(start, end, lines.join('\n'))
+          changed = true
+        }
+      }
+
+      onResolve(resolved)
+      if (!changed) return
+
+      return {
+        code: magic.toString(),
+        map: magic.generateMap({ hires: true, source: file }),
+      }
+    },
+  }
+}