@filipgutica/ui 1.1.0 → 1.1.1

package/README.md

@@ -1,7 +1,11 @@
 # @filipgutica/ui
 
-A compact Vue 3.5+ design system built on [Reka UI](https://reka-ui.com), with
-Tailwind CSS 4 tokens and safe VS Code/Open VSX color-theme normalization.
+Compact Vue 3.5+ components built on [Reka UI](https://reka-ui.com), with
+Tailwind CSS 4 and VS Code theme support.
+
+[Docs and playground](https://filipgutica.github.io/ui/) ·
+[GitHub](https://github.com/filipgutica/ui) ·
+[npm](https://www.npmjs.com/package/@filipgutica/ui)
 
 ## Install
 
@@ -9,7 +13,7 @@ Tailwind CSS 4 tokens and safe VS Code/Open VSX color-theme normalization.
 pnpm add @filipgutica/ui
 ```
 
-Import Tailwind and the shared theme files from your application stylesheet:
+Import the styles from your application stylesheet:
 
 ```css
 @import "tailwindcss";
@@ -17,102 +21,27 @@ Import Tailwind and the shared theme files from your application stylesheet:
 @import "@filipgutica/ui/components.css";
 ```
 
-The theme exposes Tailwind utilities such as `bg-ui-bg`, `bg-ui-surface`,
-`text-ui-text`, `text-ui-muted`, `border-ui-border`, and `text-ui-error`.
-
-## Vue components
-
-The first application-focused set includes:
-
-- `UiButton` with primary, secondary, ghost, danger, and text variants
-- `UiInput`, `UiSelect`, and `UiField` for consistent form controls
-- `UiCheckbox`, `UiSlider`, `UiRadioCard`, and `UiRadioCardGroup` for user input
-- `UiBadge`, `UiAlert`, and `UiProgress` for state and feedback
-- `UiCard` for structured content, actions, and footer metadata
-- `UiCodeBlock` for copyable, theme-aware source snippets
-- `UiDialog`, built on Reka UI, for accessible modal interaction
-
-Place `UiInput` or `UiSelect` inside `UiField`. The field supplies the control ID
-and automatically connects its description or error through the corresponding
-ARIA relationship.
+## Use
 
 ```vue
+<script setup lang="ts">
+import { UiButton } from '@filipgutica/ui'
+</script>
+
 <template>
   <UiButton variant="secondary" size="sm">
-    Inspect evidence
+    Save changes
   </UiButton>
 </template>
-
-<script setup lang="ts">
-import { UiButton } from '@filipgutica/ui'
-</script>
 ```
 
-`UiSelect` retains native form and keyboard behavior. Browsers with
-`appearance: base-select` support show a themed menu; other browsers use their
-native menu.
-
-`UiButton`, `UiInput`, `UiSelect`, `UiCheckbox`, and `UiSlider` share
-`size="sm | md | lg"`
-and default to the tighter `md` density. Existing `UiButton` values remain
-compatible: `compact` retains its former compact treatment and `default` maps
-to `lg`.
+The [component docs](https://filipgutica.github.io/ui/#/components/button)
+cover examples, props, slots, and events. Place inputs and selects inside
+`UiField` to connect labels, descriptions, and errors automatically.
 
-`UiCodeBlock` accepts source text through `code`, shows a copy action by default,
-and highlights the selected language using the active theme. It can display a
-title, line numbers, or wrapped lines; unknown languages stay readable as plain text:
-
-```vue
-<UiCodeBlock
-  title="Example.vue"
-  language="vue"
-  :code="snippet"
-  :line-numbers="true"
-/>
-```
+## Themes
 
-Highlighting supports Vue, JavaScript (`js`), TypeScript (`ts`), HTML, CSS,
-JSON, and Bash (`sh`/`shell`). Imported TextMate `tokenColors` are normalized
-into a shared syntax palette; language-specific overrides and font styles are
-not reproduced exactly. Themes saved before syntax support should be re-imported
-to recover their syntax colors. Existing saved themes remain usable with themed fallbacks.
-
-`UiSurface` remains exported for compatibility. New structured containers
-should use `UiCard`.
-
-## Design conventions
-
-Use a compact system-font hierarchy: 14px for UI body text, 13px for
-secondary text, and 18px for dialog titles. Treat Open VSX/VS Code themes as
-the color authority, and use semantic tokens and package components instead of
-hard-coded provider color keys.
-Typography is package-owned through `--font-ui` and `--font-mono`; override
-these once at the application root rather than restyling each component.
-
-- Use shared control sizes `sm`, `md`, and `lg` (32px, 36px, and 44px); the
-  default is `md`. Keep layout on a 4px rhythm, with 12px, 16px, and 24px as
-  common gaps and insets.
-- Choose `UiCard` for structured content and optional actions or footer data.
-  Choose `UiRadioCardGroup` with `UiRadioCard` for one-of-many rich options;
-  choose `UiDialog` for modal tasks that need focus management.
-- Use one primary action per task, secondary buttons for supporting actions,
-  and danger styling only for destructive actions. Use `UiBadge` for a short
-  status, `UiAlert` for feedback, and `UiCodeBlock` for source code.
-- Put `UiInput` and `UiSelect` in `UiField` with a visible label. Supply help
-  text or an error when needed so the field exposes the matching ARIA relationship.
-- Select menus use the same surface, type, radius, and spacing tokens as other
-  controls. Keep option rows compact, show a checkmark for the selected value, and
-  use quiet hover fills with visible keyboard focus.
-- Use raised surfaces and subtle borders for standalone cards. Align title, content,
-  and footer insets; use a quiet divider for footer metadata and avoid card shadows.
-- Keep borders quiet and skip decorative grids. Preserve visible
-  `:focus-visible` states, use 44px targets for touch-oriented actions, and provide
-  an accessible name for every interactive control.
-
-## VS Code themes
-
-The browser-safe theme entry point parses VS Code JSON/JSONC and maps supported
-workbench colors into the package's finite semantic token contract:
+Import a VS Code JSON or JSONC theme in the browser:
 
 ```ts
 import { applySemanticTheme, parseVsCodeTheme } from '@filipgutica/ui/theme'
@@ -121,89 +50,14 @@ const theme = parseVsCodeTheme({ source, fileName })
 applySemanticTheme({ root: document.documentElement, theme })
 ```
 
-The Node-only Open VSX entry point searches and imports theme extensions without
-executing extension code:
-
-```ts
-import { createOpenVsxThemeService } from '@filipgutica/ui/open-vsx'
-
-const themes = await createOpenVsxThemeService().search('Catppuccin')
-```
-
-Open VSX packages are untrusted input. The importer restricts origins, validates
-identifiers and archive paths, caps downloaded and expanded sizes, checks the
-advertised SHA-256 checksum, and retains only normalized colors. Consumers that
-redistribute theme assets remain responsible for their licenses.
-
-## Boundaries
-
-- Open VSX themes control color and light/dark/high-contrast appearance only.
-- Typography, spacing, radius, motion, and component structure remain owned by
-  this package so applications keep a consistent design language.
-- `@filipgutica/ui/open-vsx` is Node-only. Do not import it into browser bundles.
-
-## Docs and sandbox
-
-Start the component docs and sandbox:
-
-```sh
-pnpm docs:dev
-```
-
-Build the provider-neutral static assets:
-
-```sh
-pnpm docs:build
-```
-
-The docs use hash routes and relative asset paths, so the static assets work
-under a repository path without rewrite rules.
-The local Vite server also provides the same-origin `/api/open-vsx` endpoint.
-The theme picker uses this endpoint to search and import Open VSX themes.
-
-### GitHub Pages
-
-The GitHub Pages site URL is [filipgutica.github.io/ui](https://filipgutica.github.io/ui/).
-The `docs.yml` workflow builds and deploys `docs-dist` on every push to `main`.
-It can also be started manually from the Actions tab. In the repository's
-**Settings → Pages**, select **GitHub Actions** as the build and deployment source.
-
-GitHub Pages serves static files and cannot run the Open VSX API. The workflow
-sets `VITE_STATIC_HOST=true` to disable live Open VSX search and imports;
-built-in themes and local theme-file imports remain available. To build the
-same static configuration locally:
-
-```sh
-VITE_STATIC_HOST=true pnpm docs:build
-```
-
-Other production hosts must provide `/api/open-vsx` for live Open VSX imports.
-Netlify and Amplify can use a serverless adapter.
+Themes supply colors; the library keeps typography, spacing, and component
+structure consistent. Open VSX search and imports are available through
+`@filipgutica/ui/open-vsx`, which must run on a Node server.
 
 ## Development
 
 ```sh
 pnpm install
+pnpm docs:dev
 pnpm verify
 ```
-
-Commits follow the Conventional Commits format. Releases run from `main`:
-
-- `fix:` publishes a patch release
-- `feat:` publishes a minor release
-- `feat!:` publishes a major release
-- `BREAKING CHANGE:` or `[BREAKING CHANGE]` anywhere in a commit body publishes
-  a major release
-- the same markers anywhere in an associated merged PR body publish a major
-  release
-
-The `release.yml` workflow runs on every push to `main`. When semantic-release
-finds qualifying commits, it publishes the next version to npm, creates the
-matching `v<version>` tag, and creates a GitHub Release. Configure an `NPM_TOKEN`
-Actions secret with permission to publish `@filipgutica/ui`; contributors do not
-publish locally or add a token to the repository.
-
-Before the first token-backed release, remove the package's existing trusted
-publisher in npm. The workflow retains `id-token: write` only for the provenance
-attestations enabled in `package.json`; npm registry authentication comes from
-the `NPM_TOKEN` secret.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [