@celestia-island/hikari 0.4.4 → 0.30.0

package/src/components/HkProgressDialog.tsx

@@ -1,19 +1,42 @@
-import { defineComponent, nextTick, ref, watch } from "vue";
+import { defineComponent, nextTick, onBeforeUnmount, ref, watch } from "vue";
 
 import { useProgressDialog } from "../composables/useProgressDialog";
+import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
 import HModal from "./HkModal";
 import HProgressBar from "./HkProgressBar";
 import HSpinner from "./HkSpinner";
+import "./HkProgressDialog.scss";
 
 export default defineComponent({
   name: "HkProgressDialog",
   setup() {
     const state = useProgressDialog();
     const logRef = ref<HTMLElement>();
+    // Positioned wrapper around the conditional log pane — the rail host
+    // (the modal body also holds the spinner/progress bands).
+    const logWrapRef = ref<HTMLElement>();
+    // Overlay scrollbar (shared chrome) on the conditional log pane —
+    // attached when it mounts, detached when it unmounts.
+    let logScrollbar: OverlayScrollbarHandle | null = null;
+
+    function syncLogScrollbar() {
+      void nextTick(() => {
+        if (logRef.value) {
+          logScrollbar ??= attachOverlayScrollbars(logRef.value, {
+            axis: "vertical",
+            host: logWrapRef.value,
+          });
+        } else {
+          logScrollbar?.detach();
+          logScrollbar = null;
+        }
+      });
+    }
 
     watch(
       () => state.logs.length,
       () => {
+        syncLogScrollbar();
         nextTick(() => {
           const el = logRef.value;
           if (el) el.scrollTop = el.scrollHeight;
@@ -21,6 +44,11 @@ export default defineComponent({
       },
     );
 
+    onBeforeUnmount(() => {
+      logScrollbar?.detach();
+      logScrollbar = null;
+    });
+
     return () => (
       <HModal
         modelValue={state.open}
@@ -40,24 +68,14 @@ export default defineComponent({
             </div>
           )}
           {state.logs.length > 0 ? (
-            <div
-              ref={logRef}
-              style={{
-                maxHeight: "10rem",
-                overflow: "hidden auto",
-                borderRadius: "0.375rem",
-                background: "rgba(0, 0, 0, 0.06)",
-                padding: "0.5rem",
-                fontFamily: "monospace",
-                fontSize: "0.75rem",
-                lineHeight: "1.5",
-              }}
-            >
-              <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
-                {state.logs.map((line, i) => (
-                  <li key={i}>{line}</li>
-                ))}
-              </ul>
+            <div ref={logWrapRef} class="s-progress-dialog-log-wrap">
+              <div ref={logRef} class="s-progress-dialog-log">
+                <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
+                  {state.logs.map((line, i) => (
+                    <li key={i}>{line}</li>
+                  ))}
+                </ul>
+              </div>
             </div>
           ) : null}
         </div>

package/src/components/HkProtocolModal.scss

@@ -0,0 +1,26 @@
+.s-protocol-modal {
+  position: relative;
+}
+
+.s-protocol-modal-copied {
+  position: absolute;
+  top: -0.25rem;
+  right: 0;
+  margin: 0;
+  padding: var(--space-4, 0.25rem) var(--space-8, 0.5rem);
+  border-radius: var(--radius-sm, 6px);
+  background: rgb(var(--color-success) / 15%);
+  color: rgb(var(--color-success));
+  font-size: var(--text-xs, 0.75rem);
+}
+
+/* With `bodyHeight` set the body becomes its own scroll region (nested
+ * inside HkModal's body scroller) — overlay chrome only. */
+.s-protocol-modal {
+  overflow-y: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

package/src/components/HkProtocolModal.tsx

@@ -0,0 +1,112 @@
+import { computed, defineComponent, onBeforeUnmount, ref, watch } from "vue";
+import { HMarkdownRenderer, HModal, useClipboard, type ModalAction } from "@celestia-island/hikari";
+
+import { useI18n } from "../i18n/context";
+import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
+
+import "./HkProtocolModal.scss";
+
+/**
+ * HkProtocolModal — markdown EULA / privacy / terms modal.
+ * (Upstreamed from shittim-chest's plana-legacy layer.)
+ *
+ * Renders arbitrary markdown `content` (via HMarkdownRenderer) with
+ * a Decline/Accept footer. `accept`/`decline` are the caller's commit
+ * actions; closing (overlay click / ESC / X) only emits `update:modelValue`
+ * so the caller can decide whether close === decline.
+ */
+export const HkProtocolModal = defineComponent({
+  name: "HkProtocolModal",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    /** Modal title (defaults to "Agreement"). */
+    title: { type: String, default: undefined },
+    /** Markdown content to render — protocols always render as markdown. */
+    content: { type: String, default: "" },
+    /** Accept button label override. */
+    acceptLabel: { type: String, default: undefined },
+    /** Decline button label override. */
+    declineLabel: { type: String, default: undefined },
+    /** Allow dismissing without a decision (overlay/ESC/X). Default true. */
+    closable: { type: Boolean, default: true },
+    width: { type: String, default: "48rem" },
+    /** Cap the scroll body height (e.g. "60vh"). */
+    bodyHeight: { type: String, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_v: boolean) => true,
+    accept: () => true,
+    decline: () => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const clipboard = useClipboard();
+    const copied = computed(() => clipboard.copied.value);
+
+    const footerActions = computed<ModalAction[]>(() => [
+      {
+        label: t("hikari::protocol.copy", "Copy"),
+        variant: "secondary" as const,
+        onClick: () => void clipboard.copy(props.content),
+        disabled: !props.content,
+      },
+      {
+        label: props.declineLabel ?? t("hikari::protocol.decline", "Decline"),
+        variant: "secondary" as const,
+        onClick: () => emit("decline"),
+      },
+      {
+        label: props.acceptLabel ?? t("hikari::protocol.accept", "Accept"),
+        variant: "primary" as const,
+        onClick: () => emit("accept"),
+        disabled: !props.content,
+      },
+    ]);
+
+    // ── overlay scrollbar (shared chrome) ─────────────────────────
+    // With `bodyHeight` set the body becomes a height-capped scroll
+    // region NESTED inside HkModal's overlay-equipped body scroller —
+    // without the overlay it would be a surviving native bar (the exact
+    // double-scroll this library eliminates). Attach on mount, re-sync
+    // when the cap flips, detach on unmount.
+    const bodyRef = ref<HTMLElement | null>(null);
+    let bodyScrollbar: OverlayScrollbarHandle | null = null;
+    function syncBodyScrollbar(): void {
+      if (props.bodyHeight && bodyRef.value) {
+        if (!bodyScrollbar) bodyScrollbar = attachOverlayScrollbars(bodyRef.value);
+      } else {
+        bodyScrollbar?.detach();
+        bodyScrollbar = null;
+      }
+    }
+    function bindBodyRef(el: unknown): void {
+      bodyRef.value = (el as HTMLElement) ?? null;
+      syncBodyScrollbar();
+    }
+    watch(() => props.bodyHeight, () => syncBodyScrollbar());
+    onBeforeUnmount(() => {
+      bodyScrollbar?.detach();
+      bodyScrollbar = null;
+    });
+
+    return () => (
+      <HModal
+        modelValue={props.modelValue}
+        onUpdate:modelValue={(v: boolean) => emit("update:modelValue", v)}
+        title={props.title ?? t("hikari::protocol.title", "Agreement")}
+        width={props.width}
+        closable={props.closable}
+        footerActions={footerActions.value}
+      >
+        <div
+          ref={bindBodyRef}
+          class="s-protocol-modal"
+          style={props.bodyHeight ? { maxHeight: props.bodyHeight } : undefined}
+        >
+          {copied.value && <p class="s-protocol-modal-copied">{t("hikari::protocol.copied", "Copied")}</p>}
+          <HMarkdownRenderer content={props.content} />
+        </div>
+      </HModal>
+    );
+  },
+});

package/src/components/HkRadio.scss

@@ -89,7 +89,7 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--hi-color-text-on-primary, #fff);
+  background: rgb(var(--color-on-solid-icon, 255 255 255));
   z-index: 1;
 
   [data-size="lg"] & {
@@ -102,18 +102,3 @@
     height: 5px;
   }
 }
-
-/* --- Label --- */
-
-.hk-radio-label-text {
-  font-size: 0.875rem;
-  color: var(--hi-color-text-primary);
-
-  [data-size="sm"] & {
-    font-size: 0.75rem;
-  }
-
-  [data-size="lg"] & {
-    font-size: 1rem;
-  }
-}

package/src/components/HkRadio.tsx

@@ -1,4 +1,5 @@
 import { computed, defineComponent, type PropType } from "vue";
+import HkLabel from "./HkLabel";
 import "./HkRadio.scss";
 
 export interface HkRadioOption {
@@ -31,7 +32,7 @@ export default defineComponent({
   emits: {
     "update:modelValue": (_value: string | number) => true,
   },
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     return () => (
       <div
         class={[
@@ -65,7 +66,9 @@ export default defineComponent({
                 />
                 {isSelected && <span class="hk-radio-dot" />}
               </span>
-              <span class="hk-radio-label-text">{opt.label}</span>
+              <HkLabel size={props.size}>
+                {slots.label?.({ option: opt }) ?? opt.label}
+              </HkLabel>
             </label>
           );
         })}

package/src/components/HkRichInput.scss

@@ -0,0 +1,162 @@
+// Use theme variables with namespace to avoid conflicts
+@use "./hikari-vars" as vars;
+
+.s-rich-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8, 0.5rem);
+}
+
+/* ── Attachment strip ───────────────────────────────────────────── */
+.s-rich-input-attachments-wrap {
+  overflow: hidden;
+}
+
+.s-rich-input-attachments {
+  display: flex;
+  gap: var(--space-8, 0.5rem);
+  padding: var(--space-2, 0.125rem);
+}
+
+.s-rich-input-attachment {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--border-faint, rgb(var(--color-border) / 10%));
+  border-radius: var(--radius-md, 8px);
+  background: rgb(var(--color-surface) / 0.5);
+  cursor: pointer;
+  overflow: hidden;
+
+  &[data-variant="media"] {
+    width: 72px;
+    height: 48px;
+  }
+}
+
+.s-rich-input-attachment-thumb {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  video, img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.s-rich-input-attachment-play {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: rgb(0 0 0 / 25%);
+}
+
+.s-rich-input-attachment-progress {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(0 0 0 / 30%);
+}
+
+.s-rich-input-attachment-chip {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6, 0.375rem);
+  padding: var(--space-4, 0.25rem) var(--space-8, 0.5rem);
+  font-size: var(--text-2xs, 0.625rem);
+}
+
+.s-rich-input-attachment-chip-name {
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgb(var(--color-text));
+}
+
+.s-rich-input-attachment-chip-size {
+  color: rgb(var(--color-muted));
+  font-family: var(--font-mono, vars.$hikari-font-family-mono);
+}
+
+.s-rich-input-attachment-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  opacity: 0;
+  transition: opacity var(--duration-short, 0.15s) ease;
+}
+
+.s-rich-input-attachment:hover .s-rich-input-attachment-remove {
+  opacity: 1;
+}
+
+/* ── Drag overlay ───────────────────────────────────────────────── */
+.s-rich-input-drag-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8, 0.5rem);
+  padding: var(--space-16, 1rem);
+  border: 1px dashed rgb(var(--color-primary) / 45%);
+  border-radius: var(--radius-md, 8px);
+  background: var(--c-primary-subtle, rgb(var(--color-primary) / 8%));
+  color: rgb(var(--color-primary));
+  font-size: var(--text-xs, 0.75rem);
+  pointer-events: none;
+}
+
+/* ── Body ───────────────────────────────────────────────────────── */
+.s-rich-input-body {
+  border: 1px solid var(--border-faint, rgb(var(--color-border) / 10%));
+  border-radius: var(--radius-md, 8px);
+  background: rgb(var(--color-surface) / 0.5);
+  transition: border-color var(--duration-short, 0.15s) ease;
+
+  &.is-drag-over {
+    border-color: rgb(var(--color-primary));
+  }
+
+  .s-rich-input-textarea {
+    border: none;
+    box-shadow: none;
+    background: transparent;
+  }
+}
+
+.s-rich-input-textarea {
+  width: 100%;
+}
+
+/* ── Tools row ──────────────────────────────────────────────────── */
+.s-rich-input-tools {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6, 0.375rem);
+}
+
+.s-rich-input-tool-btn {
+  color: rgb(var(--color-muted));
+}
+
+.s-rich-input-mic-anchor {
+  display: inline-flex;
+  position: relative;
+}
+
+.s-rich-input-mic.is-recording {
+  color: rgb(var(--color-error));
+  background: rgb(var(--color-error) / 10%);
+}
+
+.s-rich-input-spacer {
+  flex: 1;
+}