@celestia-island/hikari 0.4.4 → 0.4.5

package/src/components/HkIcon.tsx

@@ -1,13 +1,6 @@
 import { defineComponent, type PropType } from "vue";
-import * as LucideIcons from "lucide-vue-next";
-import "../../../components/src/styles/components/icon.scss";
-
-function pascalCase(str: string): string {
-  const camel = str.replace(/-([a-z])/g, (_: string, c: string) => c.toUpperCase());
-  return camel.charAt(0).toUpperCase() + camel.slice(1);
-}
-
-const icons = LucideIcons as Record<string, any>;
+import { iconByName } from "../composables/iconRegistry";
+import "./HkIcon.scss";
 
 export default defineComponent({
   name: "HkIcon",
@@ -24,20 +17,11 @@ export default defineComponent({
         props.color ? `hk-icon-${props.color}` : "",
       ];
 
-      const pName = pascalCase(props.name);
-      const IconComp = icons[pName] || icons[props.name];
-
-      if (IconComp) {
-        return <span class={cls}><IconComp /></span>;
-      }
-
-      return (
-        <span class={cls}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="10" />
-          </svg>
-        </span>
-      );
+      // Resolve through the explicit registry: a wildcard import of
+      // lucide-vue-next here defeated tree-shaking and shipped the whole
+      // ~1500-icon library in the shared bundle of every consumer.
+      const IconComp = iconByName(props.name) as any;
+      return <span class={cls}><IconComp /></span>;
     };
   },
 });

package/src/components/HkIconButton.scss

@@ -0,0 +1,170 @@
+// Use theme variables with namespace to avoid conflicts
+@use "./hikari-vars" as vars;
+@use "./HkIconButtonVars.scss";
+
+// ------
+// Hikari IconButton Component - FUI Styling
+// Three-layer CSS variable system:
+// - Layer1: Foundation variables (foundation.scss)
+// - Layer2: Component variables (icon-button-vars.scss)
+// - Custom: Runtime overrides via AnimationBuilder
+//
+// NOTE: Hover effects are handled by Glow wrapper, not here
+// ------
+
+.hk-icon-button {
+  // Layer2 variables are defined in icon-button-vars.scss
+
+  // Layout
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  line-height: 0;
+  gap: 0;
+
+  // Size - use CSS variables
+  width: var(--hi-icon-button-size);
+  height: var(--hi-icon-button-size);
+  min-width: var(--hi-icon-button-size);
+  max-width: var(--hi-icon-button-size);
+  min-height: var(--hi-icon-button-size);
+  max-height: var(--hi-icon-button-size);
+
+  // Allow glow effect to show
+  overflow: visible;
+
+  // Remove default button styling
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  // Background - use CSS variables
+  background: var(--hi-icon-button-bg);
+  border: none;
+  border-radius: var(--hi-icon-button-radius);
+
+  // Typography
+  font-family: vars.$hikari-font-family-sans;
+  font-size: vars.$hikari-font-size-sm;
+  font-weight: 400;
+  color: var(--hi-icon-button-icon-color);
+
+  // Transitions - use CSS variables
+  transition: var(--hi-icon-button-transition);
+
+  // No transform - controlled by AnimationBuilder via Glow wrapper
+
+  // Cursor
+  cursor: pointer;
+
+  // Focus state - only outline, no color changes
+  &:focus-visible {
+    outline: 2px solid var(--hi-icon-button-border-color-focus);
+    outline-offset: 2px;
+    color: var(--hi-icon-button-icon-color);
+
+    .hk-icon-button-icon {
+      color: var(--hi-icon-button-icon-color);
+    }
+  }
+
+  // Disabled state
+  &:disabled {
+    background: var(--hi-icon-button-bg-disabled);
+    color: var(--hi-icon-button-icon-color-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // No active state - controlled by AnimationBuilder via Glow wrapper
+
+  // ------
+  // Size Variants - Variables defined in icon-button-vars.scss
+  // ------
+
+  &.hk-icon-button-16,
+  &.hk-icon-button-24,
+  &.hk-icon-button-32,
+  &.hk-icon-button-36,
+  &.hk-icon-button-40 {
+    // Size variables are already set by the classes in icon-button-vars.scss
+  }
+
+  // ------
+  // Variant: Ghost (default - transparent)
+  // ------
+
+  &.hk-icon-button-ghost,
+  &.hk-icon-button-borderless {
+    // Variables defined in icon-button-vars.scss
+  }
+
+  // ------
+  // Variant: Primary (solid primary color)
+  // ------
+
+  &.hk-icon-button-primary {
+    // Variables defined in icon-button-vars.scss
+  }
+
+  // ------
+  // Variant: Secondary (solid secondary color)
+  // ------
+
+  &.hk-icon-button-secondary {
+    // Variables defined in icon-button-vars.scss
+  }
+
+  // ------
+  // Variant: Danger (solid danger color)
+  // ------
+
+  &.hk-icon-button-danger {
+    // Variables defined in icon-button-vars.scss
+  }
+
+  // ------
+  // Variant: Success (solid success color)
+  // ------
+
+  &.hk-icon-button-success {
+    // Variables defined in icon-button-vars.scss
+  }
+
+  // ------
+  // Icon Styles - Use CSS Variables
+  // ------
+
+  .hk-icon-button-icon {
+    width: var(--hi-icon-button-icon-size);
+    height: var(--hi-icon-button-icon-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+    color: var(--hi-icon-button-icon-color);
+
+    svg {
+      width: var(--hi-icon-button-icon-size);
+      height: var(--hi-icon-button-icon-size);
+      display: block;
+      fill: currentColor;
+    }
+  }
+
+  // Active state for icon
+  &:active:not(:disabled) .hk-icon-button-icon {
+    color: var(--hi-icon-button-icon-color-active);
+  }
+
+  // Disabled state for icon
+  &:disabled .hk-icon-button-icon {
+    color: var(--hi-icon-button-icon-color-disabled);
+  }
+
+  .hk-icon-button-disabled {
+    opacity: 0.3;
+  }
+}

package/src/components/HkIconButton.tsx

@@ -1,6 +1,6 @@
 import { computed, defineComponent, type PropType } from "vue";
-import "../../../components/src/styles/components/icon_button.scss";
-import "../../../components/src/styles/components/icon-button-vars.scss";
+import "./HkIconButton.scss";
+import "./HkIconButtonVars.scss";
 
 export default defineComponent({
   name: "HkIconButton",

package/src/components/HkIconButtonVars.scss

@@ -0,0 +1,176 @@
+// HkIconButtonVars.scss
+// Layer2 - IconButton Component Variables
+//
+// This file defines component-level CSS variables for the IconButton component.
+// These variables can be overridden at runtime via AnimationBuilder.
+//
+// NOTE: Hover effects are handled by Glow wrapper, not here.
+// Only base, active, and disabled states are defined.
+
+// ------
+// Base IconButton Variables
+// ------
+
+.hk-icon-button {
+  // ------
+  // 1. Color System
+  // ------
+
+  // Icon Colors
+  --hi-icon-button-icon-color: var(--hi-icon-color);
+  --hi-icon-button-icon-color-active: var(--hi-icon-color);
+  --hi-icon-button-icon-color-disabled: rgba(128, 128, 128, 0.5);
+
+  // Background Colors
+  --hi-icon-button-bg: transparent;
+  --hi-icon-button-bg-active: var(--hi-bg-surface-dark);
+  --hi-icon-button-bg-disabled: rgba(128, 128, 128, 0.1);
+
+  // Border Colors
+  --hi-icon-button-border-color: transparent;
+  --hi-icon-button-border-color-focus: var(--hi-border-color-focus);
+
+  // Shadow & Glow (used by Glow wrapper)
+  --hi-icon-button-glow: var(--hi-glow-color);
+
+  // ------
+  // 2. Border Radius System
+  // ------
+
+  --hi-icon-button-radius: 4px;
+
+  // ------
+  // 3. Animation System
+  // ------
+
+  // Duration
+  --hi-icon-button-duration: var(--hi-duration-fast);
+  --hi-icon-button-duration-active: var(--hi-duration-instant);
+
+  // Easing
+  --hi-icon-button-easing: var(--hi-ease-default);
+
+  // Transition
+  --hi-icon-button-transition:
+    background-color var(--hi-icon-button-duration) var(--hi-icon-button-easing),
+    transform var(--hi-icon-button-duration-active) var(--hi-icon-button-easing);
+
+  // ------
+  // 4. Size System
+  // ------
+
+  --hi-icon-button-size: 40px;
+  --hi-icon-button-icon-size: var(--hi-icon-size-sm);
+
+  // ------
+  // 5. Transform System
+  // ------
+
+  --hi-icon-button-transform: none;
+  --hi-icon-button-transform-active: scale(0.95);
+}
+
+// ------
+// Size Variants
+// ------
+
+.hk-icon-button-16 {
+  --hi-icon-button-size: 16px;
+  --hi-icon-button-icon-size: var(--hi-icon-size-xs);
+}
+
+.hk-icon-button-24 {
+  --hi-icon-button-size: 24px;
+  --hi-icon-button-icon-size: var(--hi-icon-size-xs);
+}
+
+.hk-icon-button-32 {
+  --hi-icon-button-size: 32px;
+  --hi-icon-button-icon-size: var(--hi-icon-size-sm);
+}
+
+.hk-icon-button-36 {
+  --hi-icon-button-size: 36px;
+  --hi-icon-button-icon-size: var(--hi-icon-size-sm);
+}
+
+.hk-icon-button-40 {
+  --hi-icon-button-size: 40px;
+  --hi-icon-button-icon-size: var(--hi-icon-size-sm);
+}
+
+// ------
+// Ghost Variant Variables
+// ------
+
+.hk-icon-button-ghost,
+.hk-icon-button-borderless {
+  --hi-icon-button-icon-color: var(--hi-color-text-secondary);
+  --hi-icon-button-icon-color-active: var(--hi-color-text-secondary);
+
+  --hi-icon-button-bg: transparent;
+  --hi-icon-button-bg-active: var(--hi-color-gray-20, rgba(128, 128, 128, 0.2));
+
+  --hi-icon-button-border-color: transparent;
+  --hi-icon-button-glow: var(--hi-glow-color);
+}
+
+// ------
+// Primary Variant Variables
+// ------
+
+.hk-icon-button-primary {
+  --hi-icon-button-icon-color: var(--hi-color-text-on-primary);
+  --hi-icon-button-icon-color-active: var(--hi-color-text-on-primary);
+
+  --hi-icon-button-bg: var(--hi-color-primary);
+  --hi-icon-button-bg-active: var(--hi-color-primary-dark);
+
+  --hi-icon-button-border-color-focus: var(--hi-color-primary);
+  --hi-icon-button-glow: var(--hi-glow-color);
+}
+
+// ------
+// Secondary Variant Variables
+// ------
+
+.hk-icon-button-secondary {
+  --hi-icon-button-icon-color: var(--hi-color-text-on-secondary);
+  --hi-icon-button-icon-color-active: var(--hi-color-text-on-secondary);
+
+  --hi-icon-button-bg: var(--hi-color-secondary);
+  --hi-icon-button-bg-active: var(--hi-color-secondary-dark);
+
+  --hi-icon-button-border-color-focus: var(--hi-color-secondary);
+  --hi-icon-button-glow: var(--hi-glow-color);
+}
+
+// ------
+// Danger Variant Variables
+// ------
+
+.hk-icon-button-danger {
+  --hi-icon-button-icon-color: var(--hi-color-text-on-danger, #ffffff);
+  --hi-icon-button-icon-color-active: var(--hi-color-text-on-danger, #ffffff);
+
+  --hi-icon-button-bg: var(--hi-color-danger);
+  --hi-icon-button-bg-active: var(--hi-color-danger-dark);
+
+  --hi-icon-button-border-color-focus: var(--hi-color-danger);
+  --hi-icon-button-glow: var(--hi-glow-color);
+}
+
+// ------
+// Success Variant Variables
+// ------
+
+.hk-icon-button-success {
+  --hi-icon-button-icon-color: var(--hi-color-text-on-success, #ffffff);
+  --hi-icon-button-icon-color-active: var(--hi-color-text-on-success, #ffffff);
+
+  --hi-icon-button-bg: var(--hi-color-success);
+  --hi-icon-button-bg-active: var(--hi-color-success-dark);
+
+  --hi-icon-button-border-color-focus: var(--hi-color-success);
+  --hi-icon-button-glow: var(--hi-glow-color);
+}

package/src/components/HkInput.scss

@@ -25,9 +25,9 @@
   gap: var(--space-6);
   padding: var(--space-8) var(--space-12);
   min-height: 2.5rem;
-  background: rgb(var(--color-surface) / var(--opacity-half));
-  backdrop-filter: blur(var(--blur-sm));
-  border: 1px solid var(--border-input);
+  background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
+  
+  border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
   border-radius: var(--radius-sm);
   overflow: hidden;
   transition: background-color, border-color, color, box-shadow, opacity, transform, filter var(--duration-normal) var(--ease-standard);
@@ -72,6 +72,9 @@
   background: transparent;
   border: none;
   outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  border-radius: 0;
   font-family: inherit;
   font-size: var(--text-base);
   line-height: 1.5;
@@ -170,3 +173,19 @@
   -webkit-box-shadow: 0 0 0 1000px rgb(var(--color-surface)) inset !important;
   caret-color: rgb(var(--color-text));
 }
+
+/* Password-variant visibility toggle */
+.hk-input-password-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary, #888);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-text-primary, #222);
+  }
+}

package/src/components/HkInput.tsx

@@ -1,4 +1,8 @@
+import { Eye, EyeOff } from "lucide-vue-next";
 import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, watch } from "vue";
+
+import { useI18n } from "../i18n/context";
+
 import "./HkInput.scss";
 
 export default defineComponent({
@@ -19,6 +23,16 @@ export default defineComponent({
     rows: { type: Number, default: 3 },
     autoGrow: { type: Boolean, default: false },
     size: { type: String as () => "sm" | "md" | "lg", default: "md" },
+    /**
+     * Input variant. `password` renders a password field with a built-in
+     * visibility toggle (HPasswordInput layers strength / caps-lock /
+     * full-width extras on top of this base behavior). `number` maps to the
+     * numeric input type. Defaults to "text".
+     */
+    variant: {
+      type: String as () => "text" | "password" | "number",
+      default: "text",
+    },
   },
   emits: {
     "update:modelValue": (_value: string) => true,
@@ -27,9 +41,19 @@ export default defineComponent({
     keydown: (_e: KeyboardEvent) => true,
   },
   setup(props, { emit, slots }) {
+    const { t } = useI18n();
     const attrs = useAttrs();
     const inputRef = ref<HTMLElement>();
 
+    const revealing = ref(false);
+    const resolvedType = computed(() => {
+      if (props.variant === "password") {
+        return revealing.value ? "text" : "password";
+      }
+      if (props.variant === "number") return "number";
+      return props.type;
+    });
+
     const filteredAttrs = computed(() => {
       const { class: _, style: __, ...rest } = attrs as Record<string, unknown>;
       return rest;
@@ -113,7 +137,7 @@ export default defineComponent({
           {isText ? (
             <input
               ref={inputRef}
-              type={props.type}
+              type={resolvedType.value}
               value={props.modelValue}
               placeholder={props.placeholder}
               disabled={props.disabled}
@@ -163,6 +187,22 @@ export default defineComponent({
               {slots.suffixIcon()}
             </span>
           )}
+          {props.variant === "password" && !slots.suffix && !slots.suffixIcon && (
+            <span class="hk-input-affix hk-input-suffix">
+              <button
+                type="button"
+                class="hk-input-password-toggle"
+                aria-label={
+                  revealing.value
+                    ? t("hikari::input.hidePassword", "Hide password")
+                    : t("hikari::input.showPassword", "Show password")
+                }
+                onClick={() => { revealing.value = !revealing.value; }}
+              >
+                {revealing.value ? <EyeOff size={15} /> : <Eye size={15} />}
+              </button>
+            </span>
+          )}
         </div>
         {props.error ? (
           <p class="hk-input-error-msg">{props.error}</p>

package/src/components/HkKeywordSearchModal.tsx

@@ -1,5 +1,7 @@
 import { computed, defineComponent, ref, watch, type PropType } from "vue";
 
+import { useI18n } from "../i18n/context";
+
 import "./HkKeywordSearchModal.scss";
 import HModal from "./HkModal";
 import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
@@ -115,6 +117,7 @@ export default defineComponent({
     select: (_rec: unknown) => true,
   },
   setup(props, { slots, emit }) {
+    const { t } = useI18n();
     const query = ref("");
     let debounceTimer: CronHandle | null = null;
     const debouncedQuery = ref("");
@@ -190,7 +193,7 @@ export default defineComponent({
       <HModal
         modelValue={props.modelValue}
         onUpdate:modelValue={(v: boolean) => emit("update:modelValue", v)}
-        title={props.title ?? "Search"}
+        title={props.title ?? t("hk.keywordSearch.title", "Search")}
         width="40rem"
       >
         <div class="hk-kw-search">
@@ -212,7 +215,7 @@ export default defineComponent({
               class="hk-kw-search-input"
               type="text"
               value={query.value}
-              placeholder={props.placeholder ?? "Search…"}
+              placeholder={props.placeholder ?? t("hk.keywordSearch.placeholder", "Search…")}
               onInput={(e: Event) => { query.value = (e.target as HTMLInputElement).value; }}
               autofocus
             />
@@ -220,7 +223,7 @@ export default defineComponent({
               <button
                 class="hk-kw-search-clear"
                 type="button"
-                aria-label="Clear"
+                aria-label={t("hk.keywordSearch.clear", "Clear")}
                 onClick={() => {
                   query.value = "";
                   debouncedQuery.value = "";
@@ -247,13 +250,13 @@ export default defineComponent({
             {semanticActive.value ? (
               semanticLoading.value && semanticResults.value.length === 0 ? (
                 <div class="hk-kw-search-empty">
-                  {props.searchingText ?? "Searching…"}
+                  {props.searchingText ?? t("hk.keywordSearch.searching", "Searching…")}
                 </div>
               ) : semanticResults.value.length === 0 ? (
                 <div class="hk-kw-search-empty">
                   {debouncedQuery.value
-                    ? (props.emptyText ?? "No matches")
-                    : (props.placeholder ?? "Search…")}
+                    ? (props.emptyText ?? t("hk.keywordSearch.noMatches", "No matches"))
+                    : (props.placeholder ?? t("hk.keywordSearch.placeholder", "Search…"))}
                 </div>
               ) : (
                 semanticResults.value.map((r) => (
@@ -286,7 +289,7 @@ export default defineComponent({
               )
             ) : results.value.length === 0 ? (
               <div class="hk-kw-search-empty">
-                {props.emptyText ?? "No matches"}
+                {props.emptyText ?? t("hk.keywordSearch.noMatches", "No matches")}
               </div>
             ) : (
               results.value.map((r) => (

package/src/components/HkLocalePicker.tsx

@@ -0,0 +1,113 @@
+import { defineComponent, ref, type PropType } from "vue";
+
+export interface LocaleOption {
+  code: string;
+  label: string;
+}
+
+export const HkLocalePicker = defineComponent({
+  name: "HkLocalePicker",
+  props: {
+    locales: {
+      type: Array as PropType<LocaleOption[]>,
+      default: () => [],
+    },
+    currentLocale: {
+      type: String,
+      default: "en",
+    },
+  },
+  emits: ["select"],
+  setup(props, { emit }) {
+    const open = ref(false);
+
+    function handleSelect(code: string) {
+      emit("select", code);
+      open.value = false;
+    }
+
+    return () => (
+      <div style={{ position: "relative" }}>
+        <button
+          type="button"
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.25rem",
+            padding: "0.25rem 0.5rem",
+            border: "1px solid var(--border-faint, rgb(var(--color-border) / 10%))",
+            borderRadius: "var(--radius-sm, 4px)",
+            background: "transparent",
+            color: "rgb(var(--color-muted))",
+            fontSize: "0.75rem",
+            fontWeight: 500,
+            cursor: "pointer",
+            transition: "background 0.15s",
+          }}
+          onClick={() => (open.value = !open.value)}
+          onBlur={() => setTimeout(() => (open.value = false), 150)}
+        >
+          {props.currentLocale.toUpperCase()}
+          <svg width="10" height="10" viewBox="0 0 10 10" style={{ opacity: 0.5 }}>
+            <path d="M2 3.5l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.2" />
+          </svg>
+        </button>
+        {open.value && (
+          <div
+            style={{
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              right: 0,
+              minWidth: "120px",
+              background: "rgb(var(--color-surface))",
+              border: "1px solid var(--border-faint, rgb(var(--color-border) / 10%))",
+              borderRadius: "var(--radius-md, 6px)",
+              boxShadow: "0 4px 16px rgb(0 0 0 / 12%)",
+              zIndex: 1000,
+              overflow: "hidden",
+              padding: "4px",
+            }}
+          >
+            {props.locales.map((loc) => (
+              <button
+                key={loc.code}
+                type="button"
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  width: "100%",
+                  padding: "6px 10px",
+                  border: "none",
+                  borderRadius: "4px",
+                  background: loc.code === props.currentLocale
+                    ? "var(--c-primary-subtle, rgb(var(--color-primary) / 8%))"
+                    : "transparent",
+                  color: loc.code === props.currentLocale
+                    ? "var(--c-primary, rgb(var(--color-primary)))"
+                    : "rgb(var(--color-text))",
+                  fontSize: "0.75rem",
+                  cursor: "pointer",
+                  textAlign: "left",
+                  transition: "background 0.1s",
+                }}
+                onMouseenter={(e: MouseEvent) => {
+                  if (loc.code !== props.currentLocale) {
+                    (e.currentTarget as HTMLElement).style.background = "var(--c-primary-overlay, rgb(var(--color-primary) / 15%))";
+                  }
+                }}
+                onMouseleave={(e: MouseEvent) => {
+                  if (loc.code !== props.currentLocale) {
+                    (e.currentTarget as HTMLElement).style.background = "transparent";
+                  }
+                }}
+                onMousedown={() => handleSelect(loc.code)}
+              >
+                {loc.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+});