@keenmate/pure-admin-core 2.3.3 → 2.3.4

package/README.md

@@ -2,12 +2,12 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
-## What's New in 2.3.3
+## What's New in 2.3.4
 
-- **Command palette rewrite** — Multi-step command wizards (`/deploy`, `/assign`, `/go`, `/theme`), context search (`:p`, `:u`, `:o`), global search, inline/tokens display modes matching keen-pure-admin
-- **Dark theme fixes** — Command palette loading overlay, key badges, and item badges all use CSS variables instead of SCSS defaults stuck on light mode
+- **Command palette home screen & hotkeys** — Opens with categorized commands and search contexts. Alt+D/A/G/T hotkeys jump directly into commands. Global search finds commands alongside data. Form codes for quick `/go` navigation.
+- **Dropdown z-index fix** — Split button menus no longer go under sidebar/header
 
-## What's New in 2.3.2
+## What's New in 2.3.3
 
 - **Themeable border-radius via CSS variables** — All components now use `var(--pa-border-radius)`. Themes override in `:root` (same pattern as colors). Fixes long-standing issue where `@use` module isolation prevented theme control of border-radius
 - **Outline-secondary button contrast** — New `--pa-btn-secondary-outline-color` variable, readable on all dark themes
@@ -338,26 +338,65 @@ Works with both `pa-table` and `web-grid` component. First/last columns automati
 - `.pa-modal--primary/success/danger/warning` - Themed headers
 
 ### Command Palette
-- `.pa-command-palette` - Base container (add `--active` to show)
+
+macOS Spotlight-style search with multi-step commands, context search, and global search. Opens with `Ctrl+K` / `Cmd+K`.
+
+#### Behavior
+
+**Home Screen** — On open, displays a categorized list of available commands (with hotkey badges) and search contexts. Items are clickable. Typing immediately filters or switches to the appropriate mode.
+
+**Three Input Modes:**
+
+| Prefix | Mode | Behavior |
+|--------|------|----------|
+| `/` | Commands | Shows matching commands. Exact match + space enters the command wizard. |
+| `:` | Context search | Shows matching search contexts. Exact match + space enters scoped search with debounced filtering. |
+| (none) | Global search | Searches across all categories (commands, contexts, and data). Results limited to ~3 per category. |
+
+**Multi-step Commands** — Commands define an array of `steps`. Each step has `getOptions(query, previousSelections)` returning filterable options. Steps can be conditional (`shouldShow(selections)`), support free-text entry (`freeText: true`), and have prompts displayed between selections (e.g., "in", "to", "as"). The command's `onComplete(selections)` fires after all steps.
+
+**Fuzzy Matching** — Commands and contexts match on `shortcut`, `aliases`, and `name`. Matching is bidirectional: typing `/d` finds `/deploy`, and typing `/deploy` finds `/d`.
+
+**Form Codes** — Step options can have a `code` property (e.g., `"24"` for Alerts). The `filterOpts` helper matches on `label`, `description`, and exact `code` — enabling quick navigation by numeric codes common in business applications.
+
+**Display Styles:**
+
+- **Inline** — Everything in one input: `/deploy in Production branch main`. The input shows the full command string with prompts and selected values concatenated.
+- **Tokens** — Selections render as `pa-badge` chips in `__tokens` container above the input. Each badge has a `×` remove button to rewind to that step. The input only contains the current step's query. The command shortcut is the first badge.
+
+**Hotkeys** — Commands can define a `hotkey` (e.g., `"Alt+D"`). These work globally (palette closed) and inside the palette (on the home screen). The hotkey opens the palette and enters the command directly, skipping the command list.
+
+**Context Label** — `__context` element shows the active command name (e.g., "Assign to User") or search context (e.g., "Searching in Products"). Positioned inside `__input-wrapper` relative to the input.
+
+**Search Highlighting** — Matching text in result titles is wrapped in `<mark>` elements, styled with `--pa-command-palette-highlight-bg` and `--pa-command-palette-highlight-text`. Highlights persist during keyboard navigation.
+
+**Keyboard:** `↑↓` navigate, `Enter`/`Tab` select (or submit free text), `Esc` close, `Alt+key` command hotkeys.
+
+#### CSS Classes
+
+- `.pa-command-palette` - Base container (`--active` to show)
 - `.pa-command-palette__backdrop` - Overlay backdrop
 - `.pa-command-palette__container` - Modal dialog
-- `.pa-command-palette__search` - Search area (input + tokens + context)
-- `.pa-command-palette__tokens` - Token badges container (for token display mode)
+- `.pa-command-palette__search` - Search area (tokens + input-wrapper)
+- `.pa-command-palette__tokens` - Token badges container (hidden when empty via `:empty`)
 - `.pa-command-palette__input-wrapper` - Wraps input + context label (positioning anchor)
 - `.pa-command-palette__input` - Search input
-- `.pa-command-palette__context` - Context label (e.g., "Assign to User", "Searching in Products")
-- `.pa-command-palette__results` - Scrollable results area
-- `.pa-command-palette__item` - Result row (`--active` for keyboard-highlighted)
+- `.pa-command-palette__context` - Context label (`--visible` to show)
+- `.pa-command-palette__results` - Scrollable results area (`--loading` for overlay)
+- `.pa-command-palette__home` - Home screen container
+- `.pa-command-palette__home-section` - Section with border-top separator
+- `.pa-command-palette__home-heading` - Uppercase section heading
+- `.pa-command-palette__item` - Result row (`--active` for keyboard highlight)
 - `.pa-command-palette__item-icon` - Item icon
 - `.pa-command-palette__item-content` - Title + subtitle wrapper
-- `.pa-command-palette__item-title` - Item title (supports `<mark>` for search highlights)
-- `.pa-command-palette__item-meta` - Subtitle/metadata
-- `.pa-command-palette__preview` - Command step preview text
-- `.pa-command-palette__footer` - Keyboard hints bar
-- `.pa-command-palette__key` - Keyboard shortcut badge
+- `.pa-command-palette__item-title` - Title (supports `<mark>` for highlights)
+- `.pa-command-palette__item-meta` - Subtitle/metadata (shows `[code]` prefix when present)
+- `.pa-command-palette__shortcut` - Hotkey badge group (flex container)
+- `.pa-command-palette__key` - Keyboard key badge (themeable via `--pa-command-palette-key-bg/key-text`)
 - `.pa-command-palette__token-prompt` - Step prompt text between token badges
-- **Modes:** `/` commands, `:` context search, plain text global search
-- **Display styles:** Inline (everything in input) or Tokens (selections as badges)
+- `.pa-command-palette__footer` - Keyboard hints bar
+- `.pa-command-palette__empty` - Empty state message
+- `.pa-command-palette__loader` - Loading spinner + text
 
 ### Toasts
 - `.pa-toast` - Base toast

package/dist/css/main.css

@@ -6230,7 +6230,7 @@ a.pa-card p {
   border: 1px solid var(--pa-border-color);
   border-radius: var(--pa-border-radius);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
+  z-index: 7500;
   display: none;
   flex-direction: column;
   padding: 0.4rem 0;
@@ -7819,7 +7819,7 @@ a.pa-card p {
   border: 1px solid var(--pa-border-color);
   border-radius: var(--pa-border-radius);
   box-shadow: 0 0 80px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
+  z-index: 7500;
   overflow: hidden;
 }
 .pa-btn-split__menu--open {
@@ -8594,7 +8594,7 @@ a.pa-card p {
   border: 1px solid var(--pa-border-color);
   border-radius: var(--pa-border-radius);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 1060;
+  z-index: 7600;
 }
 .pa-popover__content[data-show] {
   display: block;
@@ -13909,6 +13909,28 @@ code {
   pointer-events: none;
   z-index: 1;
 }
+.pa-command-palette__home {
+  padding: 0.8rem 0;
+}
+.pa-command-palette__home-section:not(:first-child) {
+  border-top: 1px solid var(--pa-border-color);
+  margin-top: 0.4rem;
+  padding-top: 0.4rem;
+}
+.pa-command-palette__home-heading {
+  padding: 0.4rem 0.8rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--pa-text-color-2);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.pa-command-palette__shortcut {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-shrink: 0;
+}
 .pa-command-palette__empty {
   padding: 4.8rem 0.8rem;
   text-align: center;
@@ -14003,8 +14025,8 @@ code {
   border: 1px solid var(--pa-border-color);
   border-radius: var(--pa-border-radius-sm);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-weight: 500;
-  font-size: 1rem;
+  font-weight: var(--pa-command-palette-key-font-weight);
+  font-size: var(--pa-command-palette-key-font-size);
   line-height: 1;
 }
 .pa-command-palette__section {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/src/scss/_base-css-variables.scss

@@ -461,6 +461,8 @@
   --pa-command-palette-highlight-text: #{$command-palette-highlight-text};
   --pa-command-palette-key-bg: #{$subtle-bg};
   --pa-command-palette-key-text: #{$text-color-1};
+  --pa-command-palette-key-font-size: #{$font-size-xs};
+  --pa-command-palette-key-font-weight: #{$font-weight-semibold};
 
   // =========================================================================
   // MULTISELECT COLORS

package/src/scss/core-components/_command-palette.scss

@@ -156,6 +156,35 @@
     }
   }
 
+  // Home screen (idle state)
+  &__home {
+    padding: $spacing-sm 0;
+  }
+
+  &__home-section {
+    &:not(:first-child) {
+      border-top: $border-width-base solid var(--pa-border-color);
+      margin-top: $spacing-xs;
+      padding-top: $spacing-xs;
+    }
+  }
+
+  &__home-heading {
+    padding: $spacing-xs $command-palette-input-padding-h;
+    font-size: $font-size-2xs;
+    font-weight: $font-weight-semibold;
+    color: var(--pa-text-color-2);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__shortcut {
+    display: flex;
+    align-items: center;
+    gap: $spacing-xs;
+    flex-shrink: 0;
+  }
+
   // Empty state
   &__empty {
     padding: $command-palette-empty-padding-v $command-palette-input-padding-h;
@@ -271,8 +300,8 @@
     border: $border-width-base solid var(--pa-border-color);
     border-radius: var(--pa-border-radius-sm);
     font-family: $body-font-family;
-    font-weight: $font-weight-medium;
-    font-size: $font-size-2xs;
+    font-weight: var(--pa-command-palette-key-font-weight);
+    font-size: var(--pa-command-palette-key-font-size);
     line-height: 1;
   }
 

package/src/scss/variables/_system.scss

@@ -17,8 +17,8 @@ $z-index-toast: 8000 !default;
 $z-index-tooltip: 9000 !default;
 
 // Additional z-index values
-$z-index-dropdown: 1000 !default;
-$z-index-popover: 1060 !default;
+$z-index-dropdown: 7500 !default;
+$z-index-popover: 7600 !default;
 $z-index-loader: 10 !default;
 $z-index-command-palette: 10500 !default;
 $z-index-settings-panel: 10000 !default;