@tangle-network/blueprint-ui 0.1.0 → 0.1.2

package/README.md

@@ -11,7 +11,7 @@
 
 ---
 
-A TypeScript/React package that provides the building blocks for blueprint UIs on the Tangle Network. Designed to be consumed as a source dependency (no build step required) by apps using Vite or similar bundlers.
+A TypeScript/React package that provides the building blocks for blueprint UIs on the Tangle Network. The package now ships compiled ESM output plus a package-owned stylesheet so consuming apps can treat it like a normal library instead of compiling its source directly.
 
 ## What's Included
 
@@ -74,28 +74,30 @@ Keep in app-local code:
 - **`registerBlueprint`** / **`getBlueprint`** — Register and look up blueprint definitions
 - **`JobDefinition`** — Declarative job schema with field types, ABI metadata, and categories
 
-## Installation
 ## Installation
 
 ```bash
-# As a git dependency (recommended for Tangle apps)
-pnpm add github:tangle-network/blueprint-ui
+npm install @tangle-network/blueprint-ui
+# or
+pnpm add @tangle-network/blueprint-ui
 ```
 
+Package: https://www.npmjs.com/package/@tangle-network/blueprint-ui
+
 ## Publishing
 
 Automated npm publishing is configured via GitHub Actions with npm Trusted Publishing (OIDC):
 - Workflow: `.github/workflows/publish-npm.yml`
 - Triggers:
-  - GitHub Release published (`vX.Y.Z`)
-  - Manual `workflow_dispatch`
+  - Push tag `blueprint-ui-vX.Y.Z`
+  - Manual `workflow_dispatch` with `version` input
 
 No long-lived npm token is required once trusted publishing is configured.
 
 Release flow:
 1. Bump `package.json` version.
-2. Create and publish a GitHub release tagged `v<same-version>`.
-3. Workflow typechecks and runs `npm publish --access public`.
+2. Push tag `blueprint-ui-v<same-version>`.
+3. Workflow typechecks and runs `npm publish --provenance --access public`.
 
 Trusted publishing setup (one-time in npm):
 1. Open npm package settings for `@tangle-network/blueprint-ui`.
@@ -111,14 +113,48 @@ If npm does not allow configuring trusted publishing before first publish, do a
 ## Usage
 
 ```tsx
+import '@tangle-network/blueprint-ui/styles.css';
+
 // Import hooks and utilities from the main entry
-import { useSubmitJob, useJobForm, encodeJobArgs } from '@tangle-network/blueprint-ui';
+import {
+  useSubmitJob,
+  useJobForm,
+  encodeJobArgs,
+  discoverOperatorsWithClient,
+} from '@tangle-network/blueprint-ui';
 
 // Import UI components from the /components entry
 import { Button, Card, FormField } from '@tangle-network/blueprint-ui/components';
 ```
 
-The package uses source-level exports (`main` and `types` both point to `.ts` files). Your bundler must support TypeScript resolution — Vite works out of the box.
+The package exports compiled files from `dist/`, so consumers do not need TypeScript-in-`node_modules` support anymore.
+
+## Styling Setup
+
+Import the package stylesheet once near your app entry:
+
+```tsx
+import '@tangle-network/blueprint-ui/styles.css';
+```
+
+That stylesheet provides:
+- package-owned helper classes used by shared components such as `glass-card`, `font-display`, and `font-data`
+- generated utility CSS for the shared components themselves
+- a small compatibility layer that maps generic `--bp-*` tokens to `cloud` tokens by default
+
+If you want the generic shared components to follow a different token family, you can either set the `--bp-*` variables directly or scope them with one of the helper classes:
+
+```tsx
+<div className="bp-tone-arena">
+  <SomeBlueprintUiComponent />
+</div>
+```
+
+## Migration Notes
+
+- Preferred path: import `@tangle-network/blueprint-ui/styles.css` and stop scanning package source from the consumer app.
+- Compatibility bridge: `src/` is still published for now, and `blueprintUiContentGlobs` remains available for apps migrating off the old source-scanning setup.
+- The next cleanup step in consumer apps is usually removing custom Vite/Uno workarounds that existed only to compile or scan `blueprint-ui` source.
 
 ## Peer Dependencies
 
@@ -148,7 +184,7 @@ Licensed under either of [Apache License, Version 2.0](http://www.apache.org/lic
 A React component library providing UI primitives, hooks, and contract utilities for building applications on Tangle Network.
 
 **Do I need to build this package before using it?**
-No. It is designed as a source dependency consumed directly by Vite or similar bundlers with no build step required.
+No. Published consumers use the compiled `dist/` output. Only this repo itself needs to run the build before publish.
 
 **What framework does blueprint-ui support?**
 React with TypeScript. Components use Radix UI primitives and Tailwind CSS for styling.

package/dist/BlueprintHostPanel-6iVEh-f1.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "success" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+type Action = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    variant?: React.ComponentProps<typeof Button>['variant'];
+    disabled?: boolean;
+};
+type BlueprintHostHeroProps = {
+    title: string;
+    tagline?: string;
+    description?: string;
+    badges?: string[];
+    actions?: Action[];
+    children?: React.ReactNode;
+    className?: string;
+};
+declare function BlueprintHostHero({ title, tagline, description, badges, actions, children, className, }: BlueprintHostHeroProps): react_jsx_runtime.JSX.Element;
+
+type BlueprintHostPanelProps = {
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+};
+declare function BlueprintHostPanel({ title, children, className, }: BlueprintHostPanelProps): react_jsx_runtime.JSX.Element;
+
+export { BlueprintHostHero as B, type BlueprintHostHeroProps as a, BlueprintHostPanel as b, type BlueprintHostPanelProps as c, Button as d, buttonVariants as e };

package/dist/chunk-37ADATBT.js

@@ -0,0 +1,55 @@
+// src/preset.ts
+function bpThemeTokens(prefix) {
+  return {
+    elements: {
+      borderColor: `var(--${prefix}-elements-borderColor)`,
+      borderColorActive: `var(--${prefix}-elements-borderColorActive)`,
+      background: {
+        depth: {
+          1: `var(--${prefix}-elements-bg-depth-1)`,
+          2: `var(--${prefix}-elements-bg-depth-2)`,
+          3: `var(--${prefix}-elements-bg-depth-3)`,
+          4: `var(--${prefix}-elements-bg-depth-4)`
+        }
+      },
+      textPrimary: `var(--${prefix}-elements-textPrimary)`,
+      textSecondary: `var(--${prefix}-elements-textSecondary)`,
+      textTertiary: `var(--${prefix}-elements-textTertiary)`,
+      button: {
+        primary: {
+          background: `var(--${prefix}-elements-button-primary-background)`,
+          backgroundHover: `var(--${prefix}-elements-button-primary-backgroundHover)`,
+          text: `var(--${prefix}-elements-button-primary-text)`
+        },
+        secondary: {
+          background: `var(--${prefix}-elements-button-secondary-background)`,
+          backgroundHover: `var(--${prefix}-elements-button-secondary-backgroundHover)`,
+          text: `var(--${prefix}-elements-button-secondary-text)`
+        },
+        danger: {
+          background: `var(--${prefix}-elements-button-danger-background)`,
+          backgroundHover: `var(--${prefix}-elements-button-danger-backgroundHover)`,
+          text: `var(--${prefix}-elements-button-danger-text)`
+        }
+      },
+      icon: {
+        success: `var(--${prefix}-elements-icon-success)`,
+        error: `var(--${prefix}-elements-icon-error)`,
+        warning: `var(--${prefix}-elements-icon-warning)`,
+        primary: `var(--${prefix}-elements-icon-primary)`,
+        secondary: `var(--${prefix}-elements-icon-secondary)`
+      },
+      dividerColor: `var(--${prefix}-elements-dividerColor)`,
+      item: {
+        backgroundHover: `var(--${prefix}-elements-item-backgroundHover)`,
+        backgroundActive: `var(--${prefix}-elements-item-backgroundActive)`
+      },
+      focus: `var(--${prefix}-elements-focus)`
+    }
+  };
+}
+
+export {
+  bpThemeTokens
+};
+//# sourceMappingURL=chunk-37ADATBT.js.map

package/dist/chunk-37ADATBT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/preset.ts"],"sourcesContent":["/**\n * Blueprint UI semantic token theme for UnoCSS.\n *\n * Components in this package use classes like `text-bp-elements-textPrimary`.\n * Each consuming app maps these to their own CSS variables by adding this\n * theme object under a `bp` key in their UnoCSS config:\n *\n *   import { bpThemeTokens } from '@tangle-network/blueprint-ui/preset';\n *   // theme: { colors: { bp: bpThemeTokens('cloud') } }\n *   // theme: { colors: { bp: bpThemeTokens('arena') } }\n */\n\nexport function bpThemeTokens(prefix: string) {\n  return {\n    elements: {\n      borderColor: `var(--${prefix}-elements-borderColor)`,\n      borderColorActive: `var(--${prefix}-elements-borderColorActive)`,\n      background: {\n        depth: {\n          1: `var(--${prefix}-elements-bg-depth-1)`,\n          2: `var(--${prefix}-elements-bg-depth-2)`,\n          3: `var(--${prefix}-elements-bg-depth-3)`,\n          4: `var(--${prefix}-elements-bg-depth-4)`,\n        },\n      },\n      textPrimary: `var(--${prefix}-elements-textPrimary)`,\n      textSecondary: `var(--${prefix}-elements-textSecondary)`,\n      textTertiary: `var(--${prefix}-elements-textTertiary)`,\n      button: {\n        primary: {\n          background: `var(--${prefix}-elements-button-primary-background)`,\n          backgroundHover: `var(--${prefix}-elements-button-primary-backgroundHover)`,\n          text: `var(--${prefix}-elements-button-primary-text)`,\n        },\n        secondary: {\n          background: `var(--${prefix}-elements-button-secondary-background)`,\n          backgroundHover: `var(--${prefix}-elements-button-secondary-backgroundHover)`,\n          text: `var(--${prefix}-elements-button-secondary-text)`,\n        },\n        danger: {\n          background: `var(--${prefix}-elements-button-danger-background)`,\n          backgroundHover: `var(--${prefix}-elements-button-danger-backgroundHover)`,\n          text: `var(--${prefix}-elements-button-danger-text)`,\n        },\n      },\n      icon: {\n        success: `var(--${prefix}-elements-icon-success)`,\n        error: `var(--${prefix}-elements-icon-error)`,\n        warning: `var(--${prefix}-elements-icon-warning)`,\n        primary: `var(--${prefix}-elements-icon-primary)`,\n        secondary: `var(--${prefix}-elements-icon-secondary)`,\n      },\n      dividerColor: `var(--${prefix}-elements-dividerColor)`,\n      item: {\n        backgroundHover: `var(--${prefix}-elements-item-backgroundHover)`,\n        backgroundActive: `var(--${prefix}-elements-item-backgroundActive)`,\n      },\n      focus: `var(--${prefix}-elements-focus)`,\n    },\n  };\n}\n"],"mappings":";AAYO,SAAS,cAAc,QAAgB;AAC5C,SAAO;AAAA,IACL,UAAU;AAAA,MACR,aAAa,SAAS,MAAM;AAAA,MAC5B,mBAAmB,SAAS,MAAM;AAAA,MAClC,YAAY;AAAA,QACV,OAAO;AAAA,UACL,GAAG,SAAS,MAAM;AAAA,UAClB,GAAG,SAAS,MAAM;AAAA,UAClB,GAAG,SAAS,MAAM;AAAA,UAClB,GAAG,SAAS,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,aAAa,SAAS,MAAM;AAAA,MAC5B,eAAe,SAAS,MAAM;AAAA,MAC9B,cAAc,SAAS,MAAM;AAAA,MAC7B,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,YAAY,SAAS,MAAM;AAAA,UAC3B,iBAAiB,SAAS,MAAM;AAAA,UAChC,MAAM,SAAS,MAAM;AAAA,QACvB;AAAA,QACA,WAAW;AAAA,UACT,YAAY,SAAS,MAAM;AAAA,UAC3B,iBAAiB,SAAS,MAAM;AAAA,UAChC,MAAM,SAAS,MAAM;AAAA,QACvB;AAAA,QACA,QAAQ;AAAA,UACN,YAAY,SAAS,MAAM;AAAA,UAC3B,iBAAiB,SAAS,MAAM;AAAA,UAChC,MAAM,SAAS,MAAM;AAAA,QACvB;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,SAAS,SAAS,MAAM;AAAA,QACxB,OAAO,SAAS,MAAM;AAAA,QACtB,SAAS,SAAS,MAAM;AAAA,QACxB,SAAS,SAAS,MAAM;AAAA,QACxB,WAAW,SAAS,MAAM;AAAA,MAC5B;AAAA,MACA,cAAc,SAAS,MAAM;AAAA,MAC7B,MAAM;AAAA,QACJ,iBAAiB,SAAS,MAAM;AAAA,QAChC,kBAAkB,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,OAAO,SAAS,MAAM;AAAA,IACxB;AAAA,EACF;AACF;","names":[]}