feat(core): format-bytes

.agents/skills/component-creation/SKILL.md

@@ -35,8 +35,11 @@ Read the [component creation guide](projects/site/src/docs/internal/guidelines/c
    - `component-name.test.lighthouse.ts`:lighthouse tests
    - `define.ts`:registration using `define()` helper with `HTMLElementTagNameMap`
    - `index.ts`:side-effect-free export
-4. **Update bundle**: add `import '@nvidia-elements/core/<component-name>/define.js'` to `projects/core/src/bundle.ts` in alphabetical order so the bundle registers the component.
-5. **Verify**: confirm all files follow the templates in the component creation guide, run `pnpm run lint` and `pnpm run test` from the elements project.
+4. **Update shared entry points**:
+   - Add only `import '@nvidia-elements/core/<component-name>/define.js'` to `projects/core/src/bundle.ts` in alphabetical order. Keep this registration bundle import-only. Export the public API from the component `index.ts` and expose its entry point through the package `exports` map.
+   - Add the definition import to the `js-modules` list in `projects/core/src/index.test.lighthouse.ts` so the combined direct-import benchmark measures the component.
+5. **Measure payloads**: run `mise exec -- pnpm run test:lighthouse` from `projects/core`. Increase a bundle-size limit only when the measured payload exceeds the current limit.
+6. **Verify**: confirm all files follow the templates in the component creation guide, then run `mise exec -- pnpm run lint` and `mise exec -- pnpm run test` from `projects/core`.
 
 ## References
 

config/vale/styles/config/vocabularies/Elements/accept.txt

@@ -255,7 +255,6 @@ nve-grid
 nve-icon
 nve-icon-button
 nve-input
-nve-json-viewer
 nve-logo
 nve-menu
 nve-month

knip.config.js

@@ -32,7 +32,6 @@ export default {
     '@semantic-release/github',
     '@semantic-release/npm',
     '@semantic-release/release-notes-generator',
-    '@typescript-eslint/parser',
     '@typescript/lib-dom',
     'adm-zip',
     'archiver',

mise.toml

@@ -20,7 +20,7 @@ run = [
   "mise install",
   "mise exec -- git lfs install --skip-repo",
   "mise exec -- git lfs pull",
-  "mise exec -- pnpm i --frozen-lockfile --prefer-offline",
+  "mise exec -- pnpm i --frozen-lockfile --prefer-offline --config.confirmModulesPurge=false",
 ]
 
 [tasks.setup]

projects/cli/package.json

@@ -49,17 +49,17 @@
     "cli:uninstall": "root=\"${NVE_HOME:-$HOME/.nve}\" && rm -f \"$root/bin/nve\" \"$root/manifest.json\" \"$HOME/.local/bin/nve\" && (rmdir \"$root/bin\" \"$root\" 2>/dev/null || true)"
   },
   "dependencies": {
-    "@inquirer/prompts": "8.5.0",
+    "@inquirer/prompts": "8.5.2",
     "@modelcontextprotocol/ext-apps": "catalog:",
     "@modelcontextprotocol/server": "catalog:",
     "@nvidia-elements/code": "workspace:*",
     "@nvidia-elements/lint": "workspace:^",
     "adm-zip": "0.6.0",
     "archiver": "8.0.0",
-    "marked": "18.0.3",
+    "marked": "18.0.9",
     "marked-terminal": "7.3.0",
     "open": "11.0.0",
-    "ora": "9.4.0",
+    "ora": "9.4.1",
     "publint": "catalog:",
     "yargs": "18.0.0",
     "zod": "catalog:"

projects/code/eslint.config.js

@@ -8,6 +8,12 @@ export default [
   ...libraryConfig,
   ...litConfig,
   ...jsonConfig,
+  {
+    files: ['src/bundle.ts'],
+    rules: {
+      'local/no-missing-bundle-registration': ['error']
+    }
+  },
   {
     files: ['src/**/*.ts'],
     ignores: ['**/*.test.ts', '**/*.test.*.ts', '**/*.examples.ts'],

projects/core/eslint.config.js

@@ -17,6 +17,18 @@ export default [
   ...litConfig,
   ...cssConfig,
   ...jsonConfig,
+  {
+    files: ['src/bundle.ts'],
+    rules: {
+      'local/no-missing-bundle-registration': ['error'],
+      'local/no-missing-bundle-test': [
+        'error',
+        {
+          lighthouseTestFile: 'index.test.lighthouse.ts'
+        }
+      ]
+    }
+  },
   // Disable no-missing-popover-trigger globally, only enable for examples
   {
     rules: {

projects/core/package.json

@@ -378,6 +378,18 @@
       "types": "./dist/file/define.d.ts",
       "default": "./dist/file/define.js"
     },
+    "./format-bytes": {
+      "types": "./dist/format-bytes/index.d.ts",
+      "default": "./dist/format-bytes/index.js"
+    },
+    "./format-bytes/index.js": {
+      "types": "./dist/format-bytes/index.d.ts",
+      "default": "./dist/format-bytes/index.js"
+    },
+    "./format-bytes/define.js": {
+      "types": "./dist/format-bytes/define.d.ts",
+      "default": "./dist/format-bytes/define.js"
+    },
     "./format-datetime": {
       "types": "./dist/format-datetime/index.d.ts",
       "default": "./dist/format-datetime/index.js"

projects/core/src/bundle.ts

@@ -27,6 +27,7 @@ import '@nvidia-elements/core/dropdown/define.js';
 import '@nvidia-elements/core/dropdown-group/define.js';
 import '@nvidia-elements/core/dropzone/define.js';
 import '@nvidia-elements/core/file/define.js';
+import '@nvidia-elements/core/format-bytes/define.js';
 import '@nvidia-elements/core/format-datetime/define.js';
 import '@nvidia-elements/core/format-number/define.js';
 import '@nvidia-elements/core/format-relative-time/define.js';
@@ -96,6 +97,7 @@ export * from '@nvidia-elements/core/dropdown';
 export * from '@nvidia-elements/core/dropdown-group';
 export * from '@nvidia-elements/core/dropzone';
 export * from '@nvidia-elements/core/file';
+export * from '@nvidia-elements/core/format-bytes';
 export * from '@nvidia-elements/core/format-datetime';
 export * from '@nvidia-elements/core/format-number';
 export * from '@nvidia-elements/core/format-relative-time';

projects/core/src/dropdown/dropdown.ts

@@ -19,12 +19,12 @@ import styles from './dropdown.css?inline';
 
 /**
  * @element nve-dropdown
- * @description Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls.
  * @documentation https://nvidia.github.io/elements/docs/elements/dropdown/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/dropdown
- * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)
- * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)
+ * @event beforetoggle - Dispatched on a popover just before showing or hiding.
+ * @event toggle - Dispatched on a popover element just after showing or hiding.
  * @event open - Dispatched when the dropdown opens.
  * @event close - Dispatched when the dropdown closes.
  * @slot - default slot for dropdown content

projects/core/src/format-bytes/define.ts

@@ -0,0 +1,13 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { define } from '@nvidia-elements/core/internal';
+import { FormatBytes } from '@nvidia-elements/core/format-bytes';
+
+define(FormatBytes);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nve-format-bytes': FormatBytes;
+  }
+}

projects/core/src/format-bytes/format-bytes.css

@@ -0,0 +1,14 @@
+/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */
+/* SPDX-License-Identifier: Apache-2.0 */
+
+:host {
+  display: inline;
+}
+
+[internal-host] {
+  color: var(--nve-sys-text-color, inherit);
+}
+
+slot {
+  display: none;
+}