@bysivin/jumpbar 0.0.0-stage → 0.2.0

package/package.json

@@ -1,6 +1,72 @@
 {
   "name": "@bysivin/jumpbar",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Lightweight command palette for Vue 3: a framework-free ranking core with fuzzy matching, sections, pages, prefixes and frecency, plus a native <dialog> shell with async sources.",
+  "license": "MIT",
+  "author": "Sivin Varghese",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./types/core.d.ts",
+      "import": "./dist/core.js",
+      "default": "./dist/core.js"
+    },
+    "./tailwind": "./tailwind.cjs",
+    "./theme.css": "./theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "tailwind.cjs",
+    "theme.css"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/iamsivin/jumpbar.git"
+  },
+  "keywords": [
+    "command-palette",
+    "command-bar",
+    "spotlight",
+    "vue",
+    "headless",
+    "fuzzy-search"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "pnpm build && pnpm test"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^27.2.0",
+    "vite": "^6.4.4",
+    "vitest": "3.0.5",
+    "vue": "^3.5.12"
+  }
+}

package/tailwind.cjs

@@ -0,0 +1,56 @@
+const TOKENS = [
+  'background',
+  'foreground',
+  'muted-foreground',
+  'subtle-foreground',
+  'muted',
+  'subtle',
+  'border',
+  'ring',
+  'primary',
+  'primary-soft',
+  'overlay',
+  'online',
+  'busy',
+  'offline',
+];
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        jumpbar: Object.fromEntries(
+          TOKENS.map(name => [name, `var(--jumpbar-${name})`])
+        ),
+      },
+      keyframes: {
+        'pop-in': {
+          '0%': { opacity: 0, transform: 'scale(0.8) translateY(0.25rem)' },
+          '60%': { opacity: 1, transform: 'scale(1.04) translateY(0)' },
+          '100%': { opacity: 1, transform: 'scale(1) translateY(0)' },
+        },
+        'fade-in': {
+          '0%': { opacity: 0 },
+        },
+        'fade-in-up': {
+          '0%': { opacity: 0, transform: 'translateY(0.5rem)' },
+          '100%': { opacity: 1, transform: 'translateY(0)' },
+        },
+        'command-bar-out': {
+          from: { opacity: 1, transform: 'scale(1) translateY(0)' },
+          to: { opacity: 0, transform: 'scale(0.92) translateY(0.5rem)' },
+        },
+        'fade-out': {
+          to: { opacity: 0 },
+        },
+      },
+      animation: {
+        'pop-in': 'pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards',
+        'fade-in': 'fade-in 0.3s ease-out',
+        'fade-in-up': 'fade-in-up 0.3s ease-out',
+        'command-bar-out': 'command-bar-out 0.15s ease-in forwards',
+        'fade-out': 'fade-out 0.15s ease-in forwards',
+      },
+    },
+  },
+};

package/theme.css

@@ -0,0 +1,33 @@
+:root {
+  --jumpbar-background: #ffffff;
+  --jumpbar-foreground: #1c2024;
+  --jumpbar-muted-foreground: #60646c;
+  --jumpbar-subtle-foreground: #80838d;
+  --jumpbar-muted: rgb(0 0 0 / 0.05);
+  --jumpbar-subtle: rgb(0 0 0 / 0.03);
+  --jumpbar-border: rgb(0 0 0 / 0.08);
+  --jumpbar-ring: rgb(0 0 0 / 0.14);
+  --jumpbar-primary: #0090ff;
+  --jumpbar-primary-soft: rgb(0 144 255 / 0.1);
+  --jumpbar-overlay: rgb(0 0 0 / 0.45);
+  --jumpbar-online: #12a594;
+  --jumpbar-busy: #ffba18;
+  --jumpbar-offline: #80838d;
+}
+
+.dark {
+  --jumpbar-background: #18191b;
+  --jumpbar-foreground: #edeef0;
+  --jumpbar-muted-foreground: #b0b4ba;
+  --jumpbar-subtle-foreground: #777b84;
+  --jumpbar-muted: rgb(255 255 255 / 0.07);
+  --jumpbar-subtle: rgb(255 255 255 / 0.04);
+  --jumpbar-border: rgb(255 255 255 / 0.1);
+  --jumpbar-ring: rgb(255 255 255 / 0.16);
+  --jumpbar-primary: #0090ff;
+  --jumpbar-primary-soft: rgb(0 144 255 / 0.15);
+  --jumpbar-overlay: rgb(0 0 0 / 0.6);
+  --jumpbar-online: #12a594;
+  --jumpbar-busy: #ffba18;
+  --jumpbar-offline: #777b84;
+}

package/types/core.d.ts

@@ -0,0 +1,76 @@
+export type Context = { scopes?: string[] } & Record<string, unknown>;
+
+export interface Avatar {
+  name: string;
+  src?: string | null;
+  status?: 'online' | 'busy' | 'offline';
+}
+
+export interface Item {
+  id: string;
+  title: string;
+  subtitle?: string;
+  section?: string;
+  icon?: string;
+  avatar?: Avatar;
+  badge?: string;
+  shortcut?: string[];
+  keywords?: string[];
+  scopes?: string[];
+  prefix?: string;
+  weight?: number;
+  place?: 'first' | 'last';
+  searchFromRoot?: boolean;
+  page?: boolean;
+  placeholder?: string;
+  parent?: string;
+  run?: (context: Context) => void;
+}
+
+export interface RankedItem extends Item {
+  parentTitle?: string;
+}
+
+export interface Section<T extends Item = RankedItem> {
+  section: string | null;
+  items: T[];
+}
+
+export interface Frecency {
+  record(id: string): void;
+  score(id: string): number;
+}
+
+export interface FrecencyStorage {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+export interface FrecencyOptions {
+  storage: FrecencyStorage;
+  key: string;
+  now?: () => number;
+  limit?: number;
+}
+
+export interface RankOptions {
+  text?: string;
+  prefix?: string | null;
+  page?: string | null;
+  scopes?: string[];
+  frecency?: Pick<Frecency, 'score'>;
+}
+
+export function normalize(value: unknown): string;
+export function fuzzyScore(
+  query: string,
+  text: string,
+  options?: { subsequence?: boolean }
+): number;
+export function parseQuery(
+  input: string,
+  prefixes?: string[]
+): { prefix: string | null; text: string };
+export function createFrecency(options: FrecencyOptions): Frecency;
+export function rank(items: Item[], options: RankOptions): RankedItem[];
+export function groupBySection<T extends Item>(items: T[]): Section<T>[];

package/types/index.d.ts

@@ -0,0 +1,77 @@
+import type { ComputedRef, DefineComponent, Ref } from 'vue';
+import type { Context, Frecency, Item, RankedItem, Section } from './core';
+
+export * from './core';
+
+export interface Request {
+  query: string;
+  text: string;
+  prefix: string | null;
+  page: string | null;
+  context: Context;
+}
+
+export interface SearchRequest extends Request {
+  matches: number;
+  signal: AbortSignal;
+}
+
+export interface Source {
+  id: string;
+  minQuery?: number;
+  debounce?: number;
+  when?: (request: Request | SearchRequest) => boolean;
+  commands?: (request: Request) => Item[];
+  search?: (request: SearchRequest) => Promise<Item[]> | Item[];
+}
+
+export interface CommandBarOptions {
+  prefixes?: string[];
+  context?: () => Context;
+  frecency?: Frecency;
+  onSelect?: (item: Item) => void;
+  onClose?: () => void;
+  onError?: (error: unknown, source: Source) => void;
+  debounce?: number;
+  limit?: number;
+}
+
+export interface CommandBarInstance {
+  isOpen: Ref<boolean>;
+  query: Ref<string>;
+  page: ComputedRef<Item | null>;
+  pages: Ref<Item[]>;
+  visible: ComputedRef<RankedItem[]>;
+  sections: ComputedRef<Section[]>;
+  selectedIndex: Ref<number>;
+  selected: ComputedRef<RankedItem | null>;
+  isLoading: ComputedRef<boolean>;
+  open(options?: { page?: string | null; query?: string }): void;
+  close(): void;
+  toggle(): void;
+  back(): void;
+  select(item: Item | null | undefined): void;
+  setQuery(value: string): void;
+  moveSelection(delta: number): void;
+  register(source: Source): () => void;
+  configure(overrides: CommandBarOptions): void;
+  dispose(): void;
+}
+
+export function createCommandBar(options?: CommandBarOptions): CommandBarInstance;
+export function useCommandBar(): CommandBarInstance;
+
+export interface Hint {
+  keys: string[];
+  label: string;
+}
+
+export interface CommandBarProps {
+  placeholder?: string;
+  emptyText?: string;
+  scopeLabel?: string;
+  hints?: Hint[];
+  dir?: 'ltr' | 'rtl';
+}
+
+export const CommandBar: DefineComponent<CommandBarProps>;