@bitforgehq/ui 0.3.0

package/ai/reference/slide-up.md

@@ -0,0 +1,26 @@
+# slideUp
+
+Slides an element up into place, the enter animation of a bottom sheet
+
+Function from `@bitforgehq/ui/overlay` · since 0.2.0
+
+Also exported from `@bitforgehq/ui/mobile` (deprecated: 0.3.0 use slideUp from '@bitforgehq/ui/overlay'; removed in 0.4.0).
+
+Slides `el` up into place from `distance` below it (default: its own height).
+
+```ts
+import { slideUp } from '@bitforgehq/ui/overlay';
+```
+
+## Signature
+
+```ts
+function slideUp(el: HTMLElement, distance?: string): Animation
+```
+
+## Parameters
+
+| Parameter   | Type          | Description                                         |
+| ----------- | ------------- | --------------------------------------------------- |
+| `el`        | `HTMLElement` | The element to animate, usually the overlay panel.  |
+| `distance?` | `string`      | How far below its place it starts, as a CSS length. |

package/ai/reference/with-bf-shell-routing.md

@@ -0,0 +1,19 @@
+# withBfShellRouting
+
+The router setting the mobile shell's stack needs, passed to provideRouter
+
+Function from `@bitforgehq/ui/mobile` · since 0.2.0
+
+The router feature the stack needs: `canceledNavigationResolution: 'computed'`, so a refused
+back navigation (a guard stopping a swipe-back) restores the browser history position and the
+stack stays in sync with it. Pass it to `provideRouter()`.
+
+```ts
+import { withBfShellRouting } from '@bitforgehq/ui/mobile';
+```
+
+## Signature
+
+```ts
+function withBfShellRouting(): RouterConfigurationFeature
+```

package/bin/bf-ui.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+/**
+ * bf-ui CLI, shipped inside @bitforgehq/ui.
+ *
+ * Usage: bf-ui sync-ai [--check]
+ *
+ * Installs (or checks) the agent guide `ai/UI_GUIDE.md`, bundled next to this script, into the
+ * consuming project as `.ai/UI_GUIDE.md`.
+ */
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import process from 'node:process';
+
+const USAGE = 'Usage: bf-ui sync-ai [--check]';
+
+const CLAUDE_SNIPPET = `## Shared UI library
+- Before creating any UI primitive, read \`.ai/UI_GUIDE.md\` (from @bitforgehq/ui).
+- Component APIs and usage: \`node_modules/@bitforgehq/ui/ai/components/<name>.md\`.
+`;
+
+function resolveBundledGuidePath() {
+  const scriptDir = dirname(fileURLToPath(import.meta.url));
+  return join(scriptDir, '..', 'ai', 'UI_GUIDE.md');
+}
+
+function readBundledGuide() {
+  const guidePath = resolveBundledGuidePath();
+  if (!existsSync(guidePath)) {
+    console.error(
+      `bf-ui: could not find the bundled agent guide at ${guidePath}. ` +
+        'This usually means @bitforgehq/ui was installed incorrectly — reinstall the package.',
+    );
+    process.exit(2);
+  }
+  return readFileSync(guidePath, 'utf8');
+}
+
+function syncAi({ check }) {
+  const guide = readBundledGuide();
+  const targetDir = join(process.cwd(), '.ai');
+  const targetPath = join(targetDir, 'UI_GUIDE.md');
+  const current = existsSync(targetPath) ? readFileSync(targetPath, 'utf8') : undefined;
+
+  if (check) {
+    if (current === guide) {
+      console.log('.ai/UI_GUIDE.md is up to date');
+      process.exit(0);
+    }
+    console.error('.ai/UI_GUIDE.md is missing or stale — run: bunx bf-ui sync-ai');
+    process.exit(1);
+  }
+
+  mkdirSync(targetDir, { recursive: true });
+  writeFileSync(targetPath, guide);
+  console.log('Wrote .ai/UI_GUIDE.md');
+  console.log('');
+  console.log('Add this to your CLAUDE.md (or AGENTS.md):');
+  console.log(CLAUDE_SNIPPET);
+}
+
+function main() {
+  const args = process.argv.slice(2);
+  const [command, ...rest] = args;
+
+  if (command !== 'sync-ai') {
+    console.error(USAGE);
+    process.exit(1);
+  }
+
+  const check = rest.includes('--check');
+  const unknown = rest.filter((arg) => arg !== '--check');
+  if (unknown.length > 0) {
+    console.error(USAGE);
+    process.exit(1);
+  }
+
+  syncAi({ check });
+}
+
+main();

package/fesm2022/bitforgehq-ui-icons.mjs

@@ -0,0 +1,230 @@
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+const SIZE_PX = {
+	sm: 16,
+	md: 20,
+	lg: 24
+};
+var BfIconComponent = class BfIconComponent {
+	icon = input.required(...ngDevMode ? [{ debugName: "icon" }] : 	/* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	px = computed(() => SIZE_PX[this.size()], ...ngDevMode ? [{ debugName: "px" }] : 	/* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfIconComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfIconComponent,
+		isStandalone: true,
+		selector: "bf-icon",
+		inputs: {
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "inline-flex shrink-0" },
+		ngImport: i0,
+		template: `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      [attr.width]="px()"
+      [attr.height]="px()"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      [attr.role]="label() ? 'img' : null"
+      [attr.aria-label]="label() || null"
+      [attr.aria-hidden]="label() ? null : 'true'"
+    >
+      @for (node of icon(); track $index) {
+        @switch (node[0]) {
+          @case ('path') {
+            <path [attr.d]="node[1]['d']" [attr.fill]="node[1]['fill'] ?? null" />
+          }
+          @case ('circle') {
+            <circle
+              [attr.cx]="node[1]['cx']"
+              [attr.cy]="node[1]['cy']"
+              [attr.r]="node[1]['r']"
+              [attr.fill]="node[1]['fill'] ?? null"
+            />
+          }
+          @case ('ellipse') {
+            <ellipse
+              [attr.cx]="node[1]['cx']"
+              [attr.cy]="node[1]['cy']"
+              [attr.rx]="node[1]['rx']"
+              [attr.ry]="node[1]['ry']"
+              [attr.fill]="node[1]['fill'] ?? null"
+            />
+          }
+          @case ('line') {
+            <line
+              [attr.x1]="node[1]['x1']"
+              [attr.y1]="node[1]['y1']"
+              [attr.x2]="node[1]['x2']"
+              [attr.y2]="node[1]['y2']"
+              [attr.fill]="node[1]['fill'] ?? null"
+            />
+          }
+          @case ('polyline') {
+            <polyline [attr.points]="node[1]['points']" [attr.fill]="node[1]['fill'] ?? null" />
+          }
+          @case ('polygon') {
+            <polygon [attr.points]="node[1]['points']" [attr.fill]="node[1]['fill'] ?? null" />
+          }
+          @case ('rect') {
+            <rect
+              [attr.x]="node[1]['x']"
+              [attr.y]="node[1]['y']"
+              [attr.width]="node[1]['width']"
+              [attr.height]="node[1]['height']"
+              [attr.rx]="node[1]['rx']"
+              [attr.ry]="node[1]['ry']"
+              [attr.fill]="node[1]['fill'] ?? null"
+            />
+          }
+        }
+      }
+    </svg>
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfIconComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-icon",
+			host: { class: "inline-flex shrink-0" },
+			template: `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      [attr.width]="px()"
+      [attr.height]="px()"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      [attr.role]="label() ? 'img' : null"
+      [attr.aria-label]="label() || null"
+      [attr.aria-hidden]="label() ? null : 'true'"
+    >
+      @for (node of icon(); track $index) {
+        @switch (node[0]) {
+          @case ('path') {
+            <path [attr.d]="node[1]['d']" [attr.fill]="node[1]['fill'] ?? null" />
+          }
+          @case ('circle') {
+            <circle
+              [attr.cx]="node[1]['cx']"
+              [attr.cy]="node[1]['cy']"
+              [attr.r]="node[1]['r']"
+              [attr.fill]="node[1]['fill'] ?? null"
+            />
+          }
+          @case ('ellipse') {
+            <ellipse
+              [attr.cx]="node[1]['cx']"
+              [attr.cy]="node[1]['cy']"
+              [attr.rx]="node[1]['rx']"
+              [attr.ry]="node[1]['ry']"
+              [attr.fill]="node[1]['fill'] ?? null"
+            />
+          }
+          @case ('line') {
+            <line
+              [attr.x1]="node[1]['x1']"
+              [attr.y1]="node[1]['y1']"
+              [attr.x2]="node[1]['x2']"
+              [attr.y2]="node[1]['y2']"
+              [attr.fill]="node[1]['fill'] ?? null"
+            />
+          }
+          @case ('polyline') {
+            <polyline [attr.points]="node[1]['points']" [attr.fill]="node[1]['fill'] ?? null" />
+          }
+          @case ('polygon') {
+            <polygon [attr.points]="node[1]['points']" [attr.fill]="node[1]['fill'] ?? null" />
+          }
+          @case ('rect') {
+            <rect
+              [attr.x]="node[1]['x']"
+              [attr.y]="node[1]['y']"
+              [attr.width]="node[1]['width']"
+              [attr.height]="node[1]['height']"
+              [attr.rx]="node[1]['rx']"
+              [attr.ry]="node[1]['ry']"
+              [attr.fill]="node[1]['fill'] ?? null"
+            />
+          }
+        }
+      }
+    </svg>
+  `
+		}]
+	}],
+	propDecorators: {
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: true
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
+export { BfIconComponent };
+
+//# sourceMappingURL=bitforgehq-ui-icons.mjs.map

package/fesm2022/bitforgehq-ui-icons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"bitforgehq-ui-icons.mjs","names":[],"sources":["../../../projects/ui/icons/icon.component.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { type IconNode } from 'lucide';\n\n/**\n * The size of a `bf-icon`: sm 16, md 20 or lg 24 px.\n *\n * @summary The three icon sizes, 16, 20 and 24 pixels, matching the text sizes\n * @since 0.1.0\n */\nexport type BfIconSize = 'sm' | 'md' | 'lg';\n\nconst SIZE_PX: Record<BfIconSize, number> = { sm: 16, md: 20, lg: 24 };\n\n/**\n * Renders a Lucide icon from its data, tree-shakably and without a registry.\n * Import the icon you need from `lucide` (e.g. `import { Search } from 'lucide'`) and bind it.\n * Decorative by default; pass `label` when the icon carries meaning on its own (e.g. an icon-only\n * control without visible text).\n *\n * @example\n * <bf-icon [icon]=\"Search\" />\n * <bf-icon [icon]=\"Search\" label=\"Search\" size=\"lg\" />\n * @summary Tree-shakable Lucide icon renderer, decorative by default or labelled when meaningful\n * @category Icons\n * @since 0.1.0\n */\n@Component({\n  selector: 'bf-icon',\n  host: { class: 'inline-flex shrink-0' },\n  template: `\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      [attr.width]=\"px()\"\n      [attr.height]=\"px()\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      [attr.role]=\"label() ? 'img' : null\"\n      [attr.aria-label]=\"label() || null\"\n      [attr.aria-hidden]=\"label() ? null : 'true'\"\n    >\n      @for (node of icon(); track $index) {\n        @switch (node[0]) {\n          @case ('path') {\n            <path [attr.d]=\"node[1]['d']\" [attr.fill]=\"node[1]['fill'] ?? null\" />\n          }\n          @case ('circle') {\n            <circle\n              [attr.cx]=\"node[1]['cx']\"\n              [attr.cy]=\"node[1]['cy']\"\n              [attr.r]=\"node[1]['r']\"\n              [attr.fill]=\"node[1]['fill'] ?? null\"\n            />\n          }\n          @case ('ellipse') {\n            <ellipse\n              [attr.cx]=\"node[1]['cx']\"\n              [attr.cy]=\"node[1]['cy']\"\n              [attr.rx]=\"node[1]['rx']\"\n              [attr.ry]=\"node[1]['ry']\"\n              [attr.fill]=\"node[1]['fill'] ?? null\"\n            />\n          }\n          @case ('line') {\n            <line\n              [attr.x1]=\"node[1]['x1']\"\n              [attr.y1]=\"node[1]['y1']\"\n              [attr.x2]=\"node[1]['x2']\"\n              [attr.y2]=\"node[1]['y2']\"\n              [attr.fill]=\"node[1]['fill'] ?? null\"\n            />\n          }\n          @case ('polyline') {\n            <polyline [attr.points]=\"node[1]['points']\" [attr.fill]=\"node[1]['fill'] ?? null\" />\n          }\n          @case ('polygon') {\n            <polygon [attr.points]=\"node[1]['points']\" [attr.fill]=\"node[1]['fill'] ?? null\" />\n          }\n          @case ('rect') {\n            <rect\n              [attr.x]=\"node[1]['x']\"\n              [attr.y]=\"node[1]['y']\"\n              [attr.width]=\"node[1]['width']\"\n              [attr.height]=\"node[1]['height']\"\n              [attr.rx]=\"node[1]['rx']\"\n              [attr.ry]=\"node[1]['ry']\"\n              [attr.fill]=\"node[1]['fill'] ?? null\"\n            />\n          }\n        }\n      }\n    </svg>\n  `,\n})\nexport class BfIconComponent {\n  /** Lucide icon data, e.g. `Search` from `lucide`. */\n  readonly icon = input.required<IconNode>();\n  /** Visual size: 16, 20 or 24 px. */\n  readonly size = input<BfIconSize>('md');\n  /** Accessible name. Leave empty for decorative icons next to visible text. */\n  readonly label = input('');\n\n  readonly px = computed(() => SIZE_PX[this.size()]);\n}\n"],"mappings":";;AAWA,MAAM,UAAsC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;AAAE;AAsFpE,IAAa,kBAAb,MAAa,gBAAe;CAEjB,OAAO,MAAM,SAAoB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,gCAAA,CAAA,CAAA;CAEjC,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,gCAAA,CAAA,CAAA;CAE9B,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,gCAAA,CAAA,CAAA;CAEjB,KAAK,eAAe,QAAQ,KAAK,KAAI,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,KAAA,CAAA,gCAAA,CAAA,CAAA;CARvC,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,uBAAA;EAAA,UAAA;EAAA,UApEhB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkET,UAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAvE3B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM,EAAE,OAAO,uBAAsB;GACrC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEX,CAAA"}