@celestia-island/hikari 0.4.4

package/src/components/HkInput.scss

@@ -0,0 +1,172 @@
+@use "../tokens";
+
+.hk-input-wrapper {
+  display: block;
+  width: 100%;
+}
+
+.hk-input-label {
+  display: block;
+  font-size: var(--text-base);
+  font-weight: 500;
+  margin-bottom: var(--space-6);
+  color: rgb(var(--color-text));
+}
+
+.hk-input-required {
+  margin-left: var(--space-2);
+  color: rgb(var(--color-error));
+}
+
+.hk-input-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  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);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  transition: background-color, border-color, color, box-shadow, opacity, transform, filter var(--duration-normal) var(--ease-standard);
+  color: rgb(var(--color-text));
+
+  &:hover:not(.hk-input-box-disabled) {
+    border-color: var(--c-primary-strong);
+  }
+}
+
+.hk-input-box:focus-within {
+  border-color: rgb(var(--color-focused-border));
+  box-shadow: var(--shadow-focus);
+  background: rgb(var(--color-surface));
+}
+
+.hk-input-box-error {
+  border-color: var(--c-error-strong);
+}
+
+.hk-input-box-error:focus-within {
+  border-color: rgb(var(--color-error));
+  box-shadow: var(--shadow-focus-error);
+}
+
+.hk-input-box-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.hk-input-box[data-autogrow] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.hk-input-element {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: var(--text-base);
+  line-height: 1.5;
+  color: rgb(var(--color-text));
+  text-align: center;
+  padding: var(--space-8) var(--space-12);
+}
+
+.hk-input-element.hk-input-textarea {
+  position: relative;
+  inset: unset;
+  width: 100%;
+  height: auto;
+  flex: 1;
+  min-width: 0;
+  text-align: start;
+  padding: var(--space-8) var(--space-12);
+}
+
+.hk-input-textarea {
+  resize: vertical;
+  min-height: 2.5rem;
+}
+
+.hk-input-box[data-autogrow] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.hk-input-autogrow {
+  flex: 1;
+  min-height: 0;
+}
+
+.hk-input-textarea[data-autogrow] {
+  position: relative;
+  inset: unset;
+  width: 100%;
+  flex: 0 0 auto;
+  resize: none;
+  overflow: hidden;
+  min-height: 2.5rem;
+  text-align: start;
+}
+
+.hk-input-affix {
+  display: flex;
+  align-items: center;
+  color: color-mix(in srgb, rgb(var(--color-muted)) 70%, rgb(var(--color-background)));
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.hk-input-error-msg {
+  margin-top: var(--space-4);
+  font-size: var(--text-xs);
+  color: rgb(var(--color-error));
+}
+
+.hk-input-hint {
+  margin-top: var(--space-4);
+  font-size: var(--text-xs);
+  color: color-mix(in srgb, rgb(var(--color-muted)) 70%, rgb(var(--color-background)));
+}
+
+/* Autofill overrides */
+.hk-input-box input,
+.hk-input-box textarea {
+  transition: color calc(infinity * 1s) step-end, background-color calc(infinity * 1s) step-end;
+}
+
+.hk-input-box input:-webkit-autofill,
+.hk-input-box input:-webkit-autofill:hover,
+.hk-input-box input:-webkit-autofill:focus,
+.hk-input-box input:-webkit-autofill:active,
+.hk-input-box textarea:-webkit-autofill,
+.hk-input-box textarea:-webkit-autofill:hover,
+.hk-input-box textarea:-webkit-autofill:focus {
+  -webkit-text-fill-color: rgb(var(--color-text)) !important;
+  -webkit-box-shadow: 0 0 0 1000px rgb(var(--color-surface)) inset !important;
+  caret-color: rgb(var(--color-text));
+}
+
+.hk-input-box input:-webkit-autofill::first-line,
+.hk-input-box textarea:-webkit-autofill::first-line {
+  font-size: inherit !important;
+  font-family: inherit !important;
+  color: rgb(var(--color-text));
+}
+
+.hk-input-box input:-internal-autofill-previewed,
+.hk-input-box input:-internal-autofill-selected {
+  -webkit-text-fill-color: rgb(var(--color-text)) !important;
+  -webkit-box-shadow: 0 0 0 1000px rgb(var(--color-surface)) inset !important;
+  caret-color: rgb(var(--color-text));
+}

package/src/components/HkInput.tsx

@@ -0,0 +1,175 @@
+import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, watch } from "vue";
+import "./HkInput.scss";
+
+export default defineComponent({
+  name: "HkInput",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: "" },
+    type: { type: String, default: "text" },
+    placeholder: { type: String, default: "" },
+    label: { type: String, default: undefined },
+    error: { type: String, default: undefined },
+    hint: { type: String, default: undefined },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    name: { type: String, default: undefined },
+    autocomplete: { type: String, default: "off" },
+    rows: { type: Number, default: 3 },
+    autoGrow: { type: Boolean, default: false },
+    size: { type: String as () => "sm" | "md" | "lg", default: "md" },
+  },
+  emits: {
+    "update:modelValue": (_value: string) => true,
+    focus: (_e: FocusEvent) => true,
+    blur: (_e: FocusEvent) => true,
+    keydown: (_e: KeyboardEvent) => true,
+  },
+  setup(props, { emit, slots }) {
+    const attrs = useAttrs();
+    const inputRef = ref<HTMLElement>();
+
+    const filteredAttrs = computed(() => {
+      const { class: _, style: __, ...rest } = attrs as Record<string, unknown>;
+      return rest;
+    });
+
+    function onInput(e: Event) {
+      const target = e.target as HTMLInputElement | HTMLTextAreaElement;
+      emit("update:modelValue", target.value);
+    }
+
+    const isTextarea = computed(() => props.type === "textarea");
+    const isAutoGrow = computed(() => props.autoGrow && props.type === "textarea");
+
+    let lastWidth = -1;
+    let ro: ResizeObserver | null = null;
+
+    function resize() {
+      if (!props.autoGrow || props.type !== "textarea") return;
+      const ta = inputRef.value as HTMLTextAreaElement | null;
+      if (!ta) return;
+      ta.style.height = "auto";
+      ta.style.height = `${ta.scrollHeight}px`;
+    }
+
+    watch(
+      () => props.modelValue,
+      () => {
+        if (props.autoGrow) nextTick(resize);
+      },
+    );
+
+    onMounted(() => {
+      if (!isAutoGrow.value) return;
+      const ta = inputRef.value as HTMLTextAreaElement | null;
+      if (!ta) return;
+      ro = new ResizeObserver(() => {
+        const el = inputRef.value as HTMLTextAreaElement | null;
+        if (!el) return;
+        const w = el.clientWidth;
+        if (w === lastWidth) return;
+        lastWidth = w;
+        resize();
+      });
+      ro.observe(ta);
+      nextTick(resize);
+    });
+
+    onBeforeUnmount(() => ro?.disconnect());
+
+    const boxClass = computed(() => [
+      "hk-input-box",
+      `hk-input-box-${props.size}`,
+      props.error ? "hk-input-box-error" : "",
+      props.disabled ? "hk-input-box-disabled" : "",
+    ]);
+
+    const isText = !isTextarea.value;
+
+    return () => (
+      <div class="hk-input-wrapper">
+        {props.label && (
+          <label class="hk-input-label">
+            {props.label}
+            {props.required && <span class="hk-input-required">*</span>}
+          </label>
+        )}
+        <div
+          class={boxClass.value}
+          data-autogrow={isAutoGrow.value || undefined}
+        >
+          {slots.prefix && (
+            <span class="hk-input-affix hk-input-prefix">
+              {slots.prefix()}
+            </span>
+          )}
+          {slots.prefixIcon && !slots.prefix && (
+            <span class="hk-input-affix hk-input-prefix">
+              {slots.prefixIcon()}
+            </span>
+          )}
+          {isText ? (
+            <input
+              ref={inputRef}
+              type={props.type}
+              value={props.modelValue}
+              placeholder={props.placeholder}
+              disabled={props.disabled}
+              readonly={props.readonly}
+              name={props.name}
+              autocomplete={props.autocomplete}
+              data-1p-ignore
+              data-lpignore="true"
+              class="hk-input-element"
+              {...filteredAttrs.value}
+              onInput={onInput}
+              onFocus={(e) => emit("focus", e)}
+              onBlur={(e) => emit("blur", e)}
+              onKeydown={(e) => emit("keydown", e)}
+            />
+          ) : (
+            <textarea
+              ref={inputRef}
+              value={props.modelValue}
+              placeholder={props.placeholder}
+              disabled={props.disabled}
+              readonly={props.readonly}
+              rows={props.rows}
+              name={props.name}
+              autocomplete={props.autocomplete}
+              data-1p-ignore
+              data-lpignore="true"
+              class={[
+                "hk-input-element",
+                "hk-input-textarea",
+                isAutoGrow.value ? "hk-input-textarea-autogrow" : "",
+              ]}
+              {...filteredAttrs.value}
+              onInput={onInput}
+              onFocus={(e) => emit("focus", e)}
+              onBlur={(e) => emit("blur", e)}
+              onKeydown={(e) => emit("keydown", e)}
+            />
+          )}
+          {slots.suffix && (
+            <span class="hk-input-affix hk-input-suffix">
+              {slots.suffix()}
+            </span>
+          )}
+          {slots.suffixIcon && !slots.suffix && (
+            <span class="hk-input-affix hk-input-suffix">
+              {slots.suffixIcon()}
+            </span>
+          )}
+        </div>
+        {props.error ? (
+          <p class="hk-input-error-msg">{props.error}</p>
+        ) : props.hint ? (
+          <p class="hk-input-hint">{props.hint}</p>
+        ) : null}
+      </div>
+    );
+  },
+});

package/src/components/HkKbd.tsx

@@ -0,0 +1,26 @@
+import { computed, defineComponent, type PropType } from "vue";
+
+export default defineComponent({
+  name: "HkKbd",
+  props: {
+    keys: { type: String, required: true },
+    size: { type: String as PropType<"sm" | "md">, default: "md" },
+  },
+  setup(props) {
+    const chunks = computed(() => props.keys.split("+").map((k) => k.trim()));
+
+    return () => (
+      <kbd
+        class={["hk-kbd", `hk-kbd-${props.size}`]}
+        aria-hidden="true"
+      >
+        {chunks.value.map((key, i) => (
+          <span key={i}>
+            {i > 0 && <span class="hk-kbd-sep">+</span>}
+            <span class="hk-kbd-key">{key}</span>
+          </span>
+        ))}
+      </kbd>
+    );
+  },
+});

package/src/components/HkKeywordSearchModal.scss

@@ -0,0 +1,148 @@
+.hk-kw-search {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hi-space-10, 1.25rem);
+  padding: var(--hi-space-4, 0.25rem) 0;
+}
+
+.hk-kw-search-box {
+  display: flex;
+  align-items: center;
+  gap: var(--hi-space-8, 0.5rem);
+  padding: var(--hi-space-8, 0.5rem) var(--hi-space-10, 0.75rem);
+  background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
+  border: 1px solid var(--hk-kw-border, rgba(0, 0, 0, 0.08));
+  border-radius: var(--hi-radius-lg, 0.75rem);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:focus-within {
+    border-color: var(--hi-color-primary, #58a6ff);
+    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12);
+  }
+}
+
+.hk-kw-search-icon {
+  color: var(--hi-color-text-secondary, #666);
+  flex-shrink: 0;
+}
+
+.hk-kw-search-input {
+  flex: 1;
+  min-width: 0;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  outline: none;
+  color: var(--hi-color-text-primary, #333);
+  font-size: 0.875rem;
+}
+
+.hk-kw-search-clear {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: var(--hi-color-text-secondary, #666);
+  cursor: pointer;
+  display: inline-flex;
+  padding: var(--hi-space-2, 0.125rem);
+  border-radius: var(--hi-radius-sm, 0.25rem);
+
+  &:hover {
+    color: var(--hi-color-text-primary, #333);
+  }
+}
+
+.hk-kw-search-results {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hi-space-4, 0.25rem);
+  max-height: min(22rem, 50vh);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 var(--hi-space-2, 0.125rem);
+}
+
+.hk-kw-search-result {
+  appearance: none;
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--hi-radius-sm, 0.25rem);
+  padding: var(--hi-space-8, 0.5rem) var(--hi-space-10, 0.75rem);
+  cursor: pointer;
+  width: 100%;
+  color: var(--hi-color-text-primary, #333);
+  transition: background 0.15s ease, border-color 0.15s ease;
+
+  &:hover {
+    background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
+    border-color: rgba(0, 0, 0, 0.06);
+  }
+}
+
+.hk-kw-search-empty {
+  padding: var(--hi-space-24, 3rem) var(--hi-space-8, 0.5rem);
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--hi-color-text-secondary, #666);
+}
+
+.hk-kw-search-result-semantic {
+  display: block;
+}
+
+.hk-kw-search-semantic {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hi-space-4, 0.25rem);
+  min-width: 0;
+}
+
+.hk-kw-search-semantic-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--hi-space-8, 0.5rem);
+}
+
+.hk-kw-search-semantic-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--hi-color-text-primary, #333);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hk-kw-search-semantic-score {
+  flex-shrink: 0;
+  font-size: var(--hi-text-xs, 0.75rem);
+  font-variant-numeric: tabular-nums;
+  color: var(--hi-color-primary, #58a6ff);
+  background: rgba(88, 166, 255, 0.12);
+  padding: 0 var(--hi-space-6, 0.375rem);
+  border-radius: var(--hi-radius-sm, 0.25rem);
+  line-height: 1.5;
+}
+
+.hk-kw-search-semantic-snippet {
+  font-size: var(--hi-text-xs, 0.75rem);
+  color: var(--hi-color-text-secondary, #666);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.hk-kw-search-semantic-source {
+  align-self: flex-start;
+  font-size: var(--hi-text-xs, 0.75rem);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--hi-color-text-secondary, #666);
+  background: rgba(0, 0, 0, 0.04);
+  padding: 0 var(--hi-space-6, 0.375rem);
+  border-radius: var(--hi-radius-sm, 0.25rem);
+}