bref-ui 2.1.0 → 2.1.2

package/dist/theme/fonts.css

@@ -0,0 +1,8 @@
+@font-face {
+	font-family: 'Material Symbols Outlined';
+	font-style: normal;
+	font-display: block;
+	font-weight: 100 700;
+	src: url('@fontsource-variable/material-symbols-outlined/files/material-symbols-outlined-latin-fill-normal.woff2')
+		format('woff2-variations');
+}

package/dist/theme/fonts.svelte

@@ -1,10 +1,3 @@
-<style>
-	@font-face {
-		font-family: 'Material Symbols Outlined';
-		font-style: normal;
-		font-display: block;
-		font-weight: 100 700;
-		src: url('@fontsource-variable/material-symbols-outlined/files/material-symbols-outlined-latin-fill-normal.woff2')
-			format('woff2-variations');
-	}
-</style>
+<script lang="ts">
+	import './fonts.css';
+</script>

package/dist/theme/fonts.svelte.d.ts

@@ -1,18 +1,6 @@
-export default Fonts;
-type Fonts = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Fonts: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+import './fonts.css';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -24,3 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Fonts: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Fonts = InstanceType<typeof Fonts>;
+export default Fonts;

package/dist/theme/registry.json

@@ -6,6 +6,7 @@
 		"surfaces.svelte",
 		"glass.svelte",
 		"fonts.svelte",
+		"fonts.css",
 		"styles.svelte",
 		"surface.ts"
 	],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bref-ui",
-	"version": "2.1.0",
+	"version": "2.1.2",
 	"description": "A Svelte-first, human-first, agent-first UI library for building beautiful sites and apps with components you can make your own.",
 	"license": "MIT",
 	"repository": {

package/readme.md

@@ -7,11 +7,6 @@ and apps with components you can make your own.
 [![Discord](https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white)](https://discord.gg/JpgQRTUsVS)
 [![MIT license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
 
-> <small>V2 is in development and has not been published to npm. The npm badge tracks the
-> published release; the examples below use the v2 development checkout. Button,
-> Icon, Surface, Theme and ThemeModeToggle exist today. Agent skills, site generation
-> and live generative UI are planned.</small>
-
 ## Get started
 
 ### Explore the gallery
@@ -30,22 +25,20 @@ props and theme customization on `/button`, `/icon` and `/theme`.
 
 ### Use the local package
 
-The CLI/registry changes are currently local and uncommitted, so they are absent
-from the clone above. This section and the copy workflow below require the
-development checkout containing those changes.
-
-In that checkout, build a local package:
+The package includes the component CLI and canonical sources. Build a local package
+from the development checkout:
 
 ```sh
 bun run build
 npm pack --ignore-scripts
 ```
 
-This produces `bref-ui-2.0.0.tgz`. In an existing Svelte 5.56.1+ project with its
-dependencies installed, install that tarball, replacing the example path:
+This produces `bref-ui-<version>.tgz`, named after the `package.json` version. In an
+existing Svelte 5.56.1+ project with its dependencies installed, install that
+tarball, replacing the example path:
 
 ```sh
-npm install /path/to/bref-ui-2.0.0.tgz
+npm install /path/to/bref-ui-<version>.tgz
 ```
 
 Then use the components in a `.svelte` file:
@@ -111,13 +104,55 @@ is available from `bref-ui/types`. Copied components include the helper in
    complete site generation, generative UI and interactive interfaces for agent
    workflows.
 
-## Copy components into a project (WIP)
+## Copy components into a project
+
+The package includes the `bref-ui` executable, which requires Bun. After installing
+the tarball, run commands from the consumer project's root:
+
+```sh
+bun run bref-ui init
+bun run bref-ui add button
+bun run bref-ui --help
+```
+
+`init` creates `bref.config.json` and leaves an existing file untouched:
+
+```json
+{
+	"ui": "$lib/ui"
+}
+```
+
+The default destination is `src/lib/ui`. Edit `ui` to another `$lib` path, such as
+`$lib/bref`, to change the destination. The CLI maps `$lib` to `src/lib`; it does not
+discover project aliases or accept an `--alias` option. Configure the same alias
+in a plain Svelte project if using `$lib/ui` imports.
+
+`add <component>` copies the component and its registry dependencies, then merges
+component exports into the destination's `index.ts`. Button includes Icon and Theme.
+The preview lists `add`, `unchanged` and `conflict` files. Each conflicting file
+requires overwrite approval, followed by a final installation confirmation. Declining
+a prompt cancels without writes; identical files are skipped.
+
+Use the copied components in a `.svelte` file:
+
+```svelte
+<script lang="ts">
+	import { Button, Theme } from '$lib/ui';
+</script>
+
+<Theme />
+<Button label="Save" />
+```
 
-The local package includes the `bref` executable. After installing the tarball,
-preview and accept the setup and Button copies:
+Keep `bref-ui` installed for shared types imported from `bref-ui/types`. To copy
+Theme separately, run `bun run bref-ui add theme`. The copied Theme uses the default
+palette and has no `palette` prop; customize its copied CSS tokens. The package
+Theme retains its `palette` prop.
 
-Run `bun run bref-ui add theme` to copy the default-only Theme source into the configured UI directory. The copied `Theme` has no `palette` prop; edit its CSS tokens directly. The package `Theme` retains the `palette` prop. Button copies include Icon and required types. SvelteKit can use
-`--alias '$lib/bref'` during init after its existing sync command.
+Available component IDs: `button`, `checkbox`, `combobox`, `dialog`, `icon`, `pill`,
+`pill-choice-group`, `pill-group`, `popover`, `progress`, `select`, `spinner`,
+`surface`, `switch`, `text-area`, `text-input`, `theme` and `tree-view`.
 
 ## Documentation and demos
 

package/src/lib/theme/fonts.css

@@ -0,0 +1,8 @@
+@font-face {
+	font-family: 'Material Symbols Outlined';
+	font-style: normal;
+	font-display: block;
+	font-weight: 100 700;
+	src: url('@fontsource-variable/material-symbols-outlined/files/material-symbols-outlined-latin-fill-normal.woff2')
+		format('woff2-variations');
+}

package/src/lib/theme/fonts.svelte

@@ -1,10 +1,3 @@
-<style>
-	@font-face {
-		font-family: 'Material Symbols Outlined';
-		font-style: normal;
-		font-display: block;
-		font-weight: 100 700;
-		src: url('@fontsource-variable/material-symbols-outlined/files/material-symbols-outlined-latin-fill-normal.woff2')
-			format('woff2-variations');
-	}
-</style>
+<script lang="ts">
+	import './fonts.css';
+</script>

package/src/lib/theme/registry.json

@@ -6,6 +6,7 @@
 		"surfaces.svelte",
 		"glass.svelte",
 		"fonts.svelte",
+		"fonts.css",
 		"styles.svelte",
 		"surface.ts"
 	],