okengine 0.11.2 → 0.12.0

package/src/console/ui-next/src/components/motion/table/use-cell-range.ts

@@ -0,0 +1,145 @@
+/**
+ * Pointer-driven rectangular cell range for the motion Table.
+ *
+ * Capture lives on the scroller (not the cell) so drag can cross rows;
+ * `elementFromPoint` maps the pointer to `data-row` / `data-col`.
+ */
+
+import { useCallback, useRef, type PointerEvent as ReactPointerEvent } from "react";
+import type { CellRange } from "@/features/store/lib/cell-selection.ts";
+
+const INTERACTIVE = "input, textarea, button, [role='checkbox']";
+const DRAG_PX = 4;
+
+/** Options for {@link useCellRange}. */
+export interface UseCellRangeOptions {
+  readonly enabled: boolean;
+  readonly range: CellRange | null;
+  readonly onChange?: (range: CellRange | null) => void;
+  /** Fires on a click that didn't drag, when the cell was already a 1×1 selection. */
+  readonly onActivate?: (row: number, col: number) => void;
+}
+
+/**
+ * Read visible row/col from a table cell (or a descendant).
+ *
+ * @param target - Event target or hit-test node
+ */
+export function readTableCellCoord(
+  target: EventTarget | null,
+): { row: number; col: number } | null {
+  if (!(target instanceof Element)) return null;
+  const td = target.closest("[data-slot='table-cell']");
+  if (!td) return null;
+  const row = Number(td.getAttribute("data-row"));
+  const col = Number(td.getAttribute("data-col"));
+  if (!Number.isInteger(row) || !Number.isInteger(col) || row < 0 || col < 0) return null;
+  return { row, col };
+}
+
+function isSameCell(range: CellRange | null, row: number, col: number): boolean {
+  if (!range) return false;
+  return (
+    range.anchor.row === row &&
+    range.anchor.col === col &&
+    range.head.row === row &&
+    range.head.col === col
+  );
+}
+
+/**
+ * Drag / Shift+click cell selection over visible row × column indices.
+ *
+ * @param options - Enabled flag + controlled range
+ */
+export function useCellRange(options: UseCellRangeOptions): {
+  readonly onCellPointerDown: (
+    row: number,
+    col: number,
+    event: ReactPointerEvent<HTMLElement>,
+  ) => void;
+  readonly onScrollerPointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+  readonly onScrollerPointerMove: (event: ReactPointerEvent<HTMLElement>) => void;
+  readonly onPointerUp: () => void;
+} {
+  const draggingRef = useRef(false);
+  const movedRef = useRef(false);
+  const activateOnUpRef = useRef(false);
+  const originRef = useRef<{ x: number; y: number; row: number; col: number } | null>(null);
+  const rangeRef = useRef(options.range);
+  rangeRef.current = options.range;
+  const onChangeRef = useRef(options.onChange);
+  onChangeRef.current = options.onChange;
+  const onActivateRef = useRef(options.onActivate);
+  onActivateRef.current = options.onActivate;
+  const enabledRef = useRef(options.enabled);
+  enabledRef.current = options.enabled;
+
+  const onCellPointerDown = useCallback(
+    (row: number, col: number, event: ReactPointerEvent<HTMLElement>) => {
+      if (!enabledRef.current || event.button !== 0) return;
+      const target = event.target;
+      if (target instanceof Element && target.closest(INTERACTIVE)) return;
+      draggingRef.current = true;
+      movedRef.current = false;
+      originRef.current = { x: event.clientX, y: event.clientY, row, col };
+      activateOnUpRef.current = !event.shiftKey && isSameCell(rangeRef.current, row, col);
+      const scroller = event.currentTarget.closest("[data-slot='table-scroller']");
+      if (scroller instanceof HTMLElement) scroller.setPointerCapture?.(event.pointerId);
+      const current = rangeRef.current;
+      if (event.shiftKey && current) {
+        onChangeRef.current?.({ anchor: current.anchor, head: { row, col } });
+      } else {
+        onChangeRef.current?.({ anchor: { row, col }, head: { row, col } });
+      }
+    },
+    [],
+  );
+
+  const onScrollerPointerDown = useCallback((event: ReactPointerEvent<HTMLElement>) => {
+    if (!enabledRef.current || event.button !== 0) return;
+    if (readTableCellCoord(event.target)) return;
+    if (
+      event.target instanceof Element &&
+      event.target.closest("thead, button, input, textarea, [role='checkbox']")
+    ) {
+      return;
+    }
+    onChangeRef.current?.(null);
+  }, []);
+
+  const onScrollerPointerMove = useCallback((event: ReactPointerEvent<HTMLElement>) => {
+    if (!draggingRef.current) return;
+    const origin = originRef.current;
+    if (origin && Math.hypot(event.clientX - origin.x, event.clientY - origin.y) > DRAG_PX) {
+      movedRef.current = true;
+      activateOnUpRef.current = false;
+    }
+    const hit = document.elementFromPoint(event.clientX, event.clientY);
+    const coord = readTableCellCoord(hit);
+    if (!coord) return;
+    const current = rangeRef.current;
+    const anchor = current?.anchor ?? origin ?? coord;
+    onChangeRef.current?.({
+      anchor: { row: anchor.row, col: anchor.col },
+      head: coord,
+    });
+  }, []);
+
+  const onPointerUp = useCallback(() => {
+    const origin = originRef.current;
+    const activate = activateOnUpRef.current && !movedRef.current;
+    draggingRef.current = false;
+    movedRef.current = false;
+    activateOnUpRef.current = false;
+    originRef.current = null;
+    if (activate && origin) onActivateRef.current?.(origin.row, origin.col);
+  }, []);
+
+  return {
+    onCellPointerDown,
+    onScrollerPointerDown,
+    onScrollerPointerMove,
+    onPointerUp,
+  };
+}

package/src/console/ui-next/src/components/motion/table/use-column-reorder.ts

@@ -0,0 +1,112 @@
+/**
+ * Column reorder via header grip drag.
+ */
+
+import { type PointerEvent as ReactPointerEvent, useCallback, useMemo, useState } from "react";
+import type { HeaderCellRefs, TableColumn } from "./types.ts";
+
+/**
+ * Track column order and pointer-driven reorder.
+ *
+ * @param options - Columns + header refs + change callback
+ */
+export function useColumnReorder<T>({
+  columns,
+  thRefs,
+  onColumnOrderChange,
+}: {
+  readonly columns: readonly TableColumn<T>[];
+  readonly thRefs: HeaderCellRefs;
+  readonly onColumnOrderChange?: (keys: readonly string[]) => void;
+}): {
+  readonly orderedColumns: readonly TableColumn<T>[];
+  readonly dragKey: string | null;
+  readonly dropIndex: number | null;
+  readonly startReorder: (key: string, e: ReactPointerEvent) => void;
+  readonly moveReorder: (e: ReactPointerEvent) => void;
+  readonly endReorder: (e: ReactPointerEvent) => void;
+} {
+  const [order, setOrder] = useState<string[]>(() => columns.map((c) => c.key));
+  const [dragKey, setDragKey] = useState<string | null>(null);
+  const [dropIndex, setDropIndex] = useState<number | null>(null);
+
+  const orderedColumns = useMemo(() => {
+    const byKey = new Map(columns.map((c) => [c.key, c]));
+    const resultKeys = order.filter((k) => byKey.has(k));
+    const present = new Set(resultKeys);
+    columns.forEach((column, i) => {
+      if (present.has(column.key)) return;
+      let at = resultKeys.length;
+      if (i === 0) {
+        at = 0;
+      } else {
+        const neighbor = columns[i - 1];
+        const idx = neighbor ? resultKeys.indexOf(neighbor.key) : -1;
+        at = idx === -1 ? i : idx + 1;
+      }
+      resultKeys.splice(at, 0, column.key);
+      present.add(column.key);
+    });
+    return resultKeys.map((k) => byKey.get(k)).filter((c): c is TableColumn<T> => c !== undefined);
+  }, [order, columns]);
+
+  const dropIndexFor = useCallback(
+    (clientX: number) => {
+      for (let i = 0; i < orderedColumns.length; i++) {
+        const col = orderedColumns[i];
+        if (!col) continue;
+        const rect = thRefs.current[col.key]?.getBoundingClientRect();
+        if (rect && clientX < rect.left + rect.width / 2) return i;
+      }
+      return orderedColumns.length;
+    },
+    [orderedColumns, thRefs],
+  );
+
+  const startReorder = useCallback((key: string, e: ReactPointerEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragKey(key);
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, []);
+
+  const moveReorder = useCallback(
+    (e: ReactPointerEvent) => {
+      if (!dragKey) return;
+      setDropIndex(dropIndexFor(e.clientX));
+    },
+    [dragKey, dropIndexFor],
+  );
+
+  const endReorder = useCallback(
+    (e: ReactPointerEvent) => {
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      }
+      if (dragKey && dropIndex !== null) {
+        const keys = orderedColumns.map((c) => c.key);
+        const from = keys.indexOf(dragKey);
+        if (from !== -1) {
+          const without = keys.filter((_, i) => i !== from);
+          let to = dropIndex;
+          if (from < to) to--;
+          without.splice(to, 0, dragKey);
+          setOrder(without);
+          onColumnOrderChange?.(without);
+        }
+      }
+      setDragKey(null);
+      setDropIndex(null);
+    },
+    [dragKey, dropIndex, orderedColumns, onColumnOrderChange],
+  );
+
+  return {
+    orderedColumns,
+    dragKey,
+    dropIndex,
+    startReorder,
+    moveReorder,
+    endReorder,
+  };
+}

package/src/console/ui-next/src/components/motion/table/use-column-resize.ts

@@ -0,0 +1,83 @@
+/**
+ * Column resize via header trailing-edge drag.
+ */
+
+import { type PointerEvent as ReactPointerEvent, useCallback, useRef, useState } from "react";
+import type { HeaderCellRefs, TableColumn } from "./types.ts";
+
+/**
+ * Snapshot pixel widths and drag one column's trailing edge.
+ *
+ * @param options - Ordered columns + header refs + min width
+ */
+export function useColumnResize<T>({
+  orderedColumns,
+  thRefs,
+  minColumnWidth,
+  onColumnResize,
+}: {
+  readonly orderedColumns: readonly TableColumn<T>[];
+  readonly thRefs: HeaderCellRefs;
+  readonly minColumnWidth: number;
+  readonly onColumnResize?: (key: string, width: number) => void;
+}): {
+  readonly widths: Readonly<Record<string, number>>;
+  readonly startResize: (key: string, e: ReactPointerEvent) => void;
+  readonly moveResize: (e: ReactPointerEvent) => void;
+  readonly endResize: (e: ReactPointerEvent) => void;
+} {
+  const resizeRef = useRef<{
+    key: string;
+    startX: number;
+    startWidth: number;
+  } | null>(null);
+  const [widths, setWidths] = useState<Record<string, number>>({});
+
+  const startResize = useCallback(
+    (key: string, e: ReactPointerEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const snapshot = { ...widths };
+      for (const column of orderedColumns) {
+        if (snapshot[column.key] == null) {
+          const measured = thRefs.current[column.key]?.getBoundingClientRect().width;
+          snapshot[column.key] = measured ? Math.round(measured) : minColumnWidth;
+        }
+      }
+      resizeRef.current = {
+        key,
+        startX: e.clientX,
+        startWidth: snapshot[key] ?? minColumnWidth,
+      };
+      setWidths(snapshot);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [minColumnWidth, orderedColumns, thRefs, widths],
+  );
+
+  const moveResize = useCallback(
+    (e: ReactPointerEvent) => {
+      const state = resizeRef.current;
+      if (!state) return;
+      const width = Math.max(minColumnWidth, state.startWidth + (e.clientX - state.startX));
+      setWidths((prev) => ({ ...prev, [state.key]: width }));
+    },
+    [minColumnWidth],
+  );
+
+  const endResize = useCallback(
+    (e: ReactPointerEvent) => {
+      const state = resizeRef.current;
+      resizeRef.current = null;
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      }
+      if (state) {
+        onColumnResize?.(state.key, widths[state.key] ?? state.startWidth);
+      }
+    },
+    [onColumnResize, widths],
+  );
+
+  return { widths, startResize, moveResize, endResize };
+}

package/src/console/ui-next/src/components/motion/table/use-column-sort.ts

@@ -0,0 +1,73 @@
+/**
+ * Column sort for the motion Table.
+ */
+
+import { useCallback, useMemo, useState } from "react";
+import type { SortState, TableColumn, TableRow } from "./types.ts";
+import { readSortValue } from "./utils.ts";
+
+/**
+ * Toggle asc → desc → none and return sorted rows.
+ *
+ * @param options - Rows + columns + controlled/uncontrolled sort
+ */
+export function useColumnSort<T>({
+  rows,
+  columns,
+  sort: sortProp,
+  defaultSort = null,
+  onSortChange,
+}: {
+  readonly rows: readonly TableRow<T>[];
+  readonly columns: readonly TableColumn<T>[];
+  readonly sort?: SortState | null;
+  readonly defaultSort?: SortState | null;
+  readonly onSortChange?: (sort: SortState | null) => void;
+}): {
+  readonly sort: SortState | null;
+  readonly sortedRows: readonly TableRow<T>[];
+  readonly toggleSort: (key: string) => void;
+} {
+  const [internalSort, setInternalSort] = useState<SortState | null>(defaultSort);
+  const sort = sortProp !== undefined ? sortProp : internalSort;
+
+  const commit = useCallback(
+    (next: SortState | null) => {
+      if (sortProp === undefined) setInternalSort(next);
+      onSortChange?.(next);
+    },
+    [sortProp, onSortChange],
+  );
+
+  const toggleSort = useCallback(
+    (key: string) => {
+      if (!sort || sort.key !== key) {
+        commit({ key, direction: "asc" });
+      } else if (sort.direction === "asc") {
+        commit({ key, direction: "desc" });
+      } else {
+        commit(null);
+      }
+    },
+    [sort, commit],
+  );
+
+  const sortedRows = useMemo(() => {
+    if (!sort) return rows;
+    const column = columns.find((c) => c.key === sort.key);
+    if (!column) return rows;
+    const copy = [...rows];
+    copy.sort((a, b) => {
+      const av = readSortValue(a.row, column);
+      const bv = readSortValue(b.row, column);
+      const cmp =
+        typeof av === "number" && typeof bv === "number"
+          ? av - bv
+          : String(av).localeCompare(String(bv));
+      return sort.direction === "asc" ? cmp : -cmp;
+    });
+    return copy;
+  }, [rows, sort, columns]);
+
+  return { sort, sortedRows, toggleSort };
+}

package/src/console/ui-next/src/components/motion/table/use-row-selection.ts

@@ -0,0 +1,70 @@
+/**
+ * Row selection for the motion Table.
+ */
+
+import { useCallback, useMemo, useState } from "react";
+import type { TableRow } from "./types.ts";
+
+/**
+ * Checkbox selection over the currently sorted row set.
+ *
+ * @param options - Sorted rows + controlled/uncontrolled ids
+ */
+export function useRowSelection<T>({
+  sortedRows,
+  selectedRowIds,
+  defaultSelectedRowIds,
+  onSelectionChange,
+}: {
+  readonly sortedRows: readonly TableRow<T>[];
+  readonly selectedRowIds?: readonly string[];
+  readonly defaultSelectedRowIds?: readonly string[];
+  readonly onSelectionChange?: (ids: readonly string[]) => void;
+}): {
+  readonly selected: ReadonlySet<string>;
+  readonly allSelected: boolean;
+  readonly someSelected: boolean;
+  readonly toggleAll: () => void;
+  readonly toggleRow: (id: string) => void;
+} {
+  const [internalSelected, setInternalSelected] = useState<Set<string>>(
+    () => new Set(defaultSelectedRowIds),
+  );
+  const selected = useMemo(
+    () => (selectedRowIds !== undefined ? new Set(selectedRowIds) : internalSelected),
+    [selectedRowIds, internalSelected],
+  );
+
+  const commit = useCallback(
+    (next: Set<string>) => {
+      if (selectedRowIds === undefined) setInternalSelected(next);
+      onSelectionChange?.([...next]);
+    },
+    [selectedRowIds, onSelectionChange],
+  );
+
+  const allSelected = sortedRows.length > 0 && sortedRows.every((r) => selected.has(r.id));
+  const someSelected = sortedRows.some((r) => selected.has(r.id));
+
+  const toggleAll = useCallback(() => {
+    const next = new Set(selected);
+    if (allSelected) {
+      for (const r of sortedRows) next.delete(r.id);
+    } else {
+      for (const r of sortedRows) next.add(r.id);
+    }
+    commit(next);
+  }, [allSelected, sortedRows, selected, commit]);
+
+  const toggleRow = useCallback(
+    (id: string) => {
+      const next = new Set(selected);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      commit(next);
+    },
+    [selected, commit],
+  );
+
+  return { selected, allSelected, someSelected, toggleAll, toggleRow };
+}

package/src/console/ui-next/src/components/motion/table/utils.ts

@@ -0,0 +1,138 @@
+/**
+ * Layout helpers for the motion Table.
+ */
+
+import type { ReactNode } from "react";
+import { rangeContains, type CellRange } from "@/features/store/lib/cell-selection.ts";
+import { cn } from "@/lib/utils.ts";
+import type { TableColumn } from "./types.ts";
+
+export const CHECKBOX_PX = 48;
+export const CHECKBOX_WIDTH = `${CHECKBOX_PX}px`;
+
+/**
+ * Hairline table checkbox — overrides the beUI well without editing the primitive.
+ */
+export const TABLE_CHECKBOX_CLASS = cn(
+  "[&_button]:size-3.5 [&_button]:rounded-[3px] [&_button]:border! [&_button]:border-border! [&_button]:bg-transparent!",
+  "[&_button]:ring-offset-0 [&_button]:hover:border-foreground/50!",
+  "[&_button[data-state=checked]]:border-sky-500! [&_button[data-state=checked]]:bg-sky-500! [&_button[data-state=checked]]:text-white!",
+  "[&_button[data-state=indeterminate]]:border-sky-500! [&_button[data-state=indeterminate]]:bg-sky-500! [&_button[data-state=indeterminate]]:text-white!",
+);
+
+/** Highlights the top edge of the active column's header cell. */
+export const COLUMN_ACTIVE_SHADOW = "inset 0 1px 0 var(--color-sky-500)";
+
+/**
+ * Selected-row fill — same /10 step as StatusChip sky.
+ * Hover steps to /15 so the wash still reads on pointer.
+ */
+export const ROW_SELECTED_FILL = "bg-sky-500/10";
+
+/** Cell-range fill — one step above row selection. */
+export const CELL_RANGE_FILL = "bg-sky-500/15";
+
+/**
+ * Bottom hairline painted inside the cell so `overflow-hidden` and
+ * `border-collapse` cannot hide it. Selected rows use StatusChip's
+ * /25 border step so consecutive selected rows stay distinct.
+ *
+ * @param selected - Whether the parent row is selected
+ */
+export function cellHairline(selected: boolean): string {
+  return cn(
+    "relative after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:z-[1] after:h-px",
+    selected ? "after:bg-sky-500/25" : "after:bg-border/60",
+  );
+}
+
+/**
+ * Flex justification for a column alignment.
+ *
+ * @param align - Column align
+ */
+export function alignFlex(align: TableColumn<unknown>["align"]): string {
+  if (align === "right") return "justify-end";
+  if (align === "center") return "justify-center";
+  return "justify-start";
+}
+
+/**
+ * Text alignment class for a column.
+ *
+ * @param align - Column align
+ */
+export function alignText(align: TableColumn<unknown>["align"]): string {
+  if (align === "right") return "text-right";
+  if (align === "center") return "text-center";
+  return "text-left";
+}
+
+/**
+ * Read a cell's display value.
+ *
+ * @param row - Data row
+ * @param column - Column def
+ */
+export function readCell<T>(row: T, column: TableColumn<T>): ReactNode {
+  if (column.cell) return column.cell(row);
+  return (row as Record<string, ReactNode>)[column.key];
+}
+
+/**
+ * Read a cell's sort value.
+ *
+ * @param row - Data row
+ * @param column - Column def
+ */
+export function readSortValue<T>(row: T, column: TableColumn<T>): string | number {
+  if (column.sortValue) return column.sortValue(row);
+  const raw = (row as Record<string, unknown>)[column.key];
+  if (typeof raw === "number") return raw;
+  if (raw === null || raw === undefined) return "";
+  if (typeof raw === "string") return raw;
+  if (typeof raw === "boolean") return raw ? 1 : 0;
+  try {
+    return JSON.stringify(raw);
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Stringify a row field for the inline editor.
+ *
+ * @param row - Data row
+ * @param key - Column key
+ */
+export function editableCellValue<T>(row: T, key: string): string {
+  const raw = (row as Record<string, unknown>)[key];
+  if (raw === null || raw === undefined) return "";
+  if (typeof raw === "string") return raw;
+  if (typeof raw === "number" || typeof raw === "boolean") return String(raw);
+  try {
+    return JSON.stringify(raw);
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Whether a visible cell sits inside the range, and whether it is the head
+ * (the click origin — draws the 2px primary outline).
+ *
+ * @param range - Current selection
+ * @param row - Visible row index
+ * @param col - Visible column index
+ */
+export function cellRangeFlags(
+  range: CellRange | null,
+  row: number,
+  col: number,
+): { readonly inRange: boolean; readonly isHead: boolean } {
+  if (!range) return { inRange: false, isHead: false };
+  return {
+    inRange: rangeContains(range, row, col),
+    isHead: range.head.row === row && range.head.col === col,
+  };
+}

package/src/console/ui-next/src/components/oke-logo.tsx

@@ -0,0 +1,65 @@
+/**
+ * OKE wordmark + icon mark logos (Console chrome).
+ *
+ * Console wordmark — site marks.
+ * `currentColor` so they follow light/dark foreground tokens.
+ */
+
+import type { SVGProps } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * OKE wordmark for Console navigation and setup.
+ *
+ * @param props - Standard SVG attributes; `className` controls size and color
+ */
+export function OkeLogo({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 327 87"
+      fill="none"
+      role="img"
+      aria-label="OKE"
+      className={cn("text-foreground", className)}
+      {...props}
+    >
+      <path
+        d="M231.08 84.672V0H320.648V13.824H250.088V33.696H303.944V47.952H250.088V70.848H321.224L326.984 83.088C326.984 83.472 325.688 83.856 323.096 84.24C320.504 84.528 316.04 84.672 309.704 84.672H231.08Z"
+        fill="currentColor"
+      />
+      <path
+        d="M136.638 13.672V36.864H144.702C146.622 36.864 148.206 36.624 149.454 36.144C150.702 35.664 151.854 34.896 152.91 33.84C155.598 31.152 158.67 27.792 162.126 23.76C165.582 19.728 168.942 15.6 172.206 11.376C175.566 7.05599 178.446 3.264 180.846 0H204.174L198.27 8.64C195.582 11.424 192.702 14.448 189.63 17.712C186.558 20.976 183.534 24.192 180.558 27.36C177.582 30.432 174.894 33.168 172.494 35.568C170.094 37.872 168.318 39.552 167.166 40.608C169.758 41.472 172.11 42.576 174.222 43.92C176.43 45.264 179.118 47.232 182.286 49.824C184.686 51.744 186.99 53.712 189.198 55.728C191.502 57.744 194.142 60.144 197.118 62.928C200.478 66 203.646 68.256 206.622 69.696C209.598 71.136 212.094 72.048 214.11 72.432C216.222 72.816 217.566 73.008 218.142 73.008L215.262 84.672C214.974 84.96 214.11 85.248 212.67 85.536C211.23 85.92 209.166 86.112 206.478 86.112C201.774 86.112 197.694 85.152 194.238 83.232C190.782 81.312 187.374 78.72 184.014 75.456C180.366 71.616 175.95 67.2 170.766 62.208C168.366 59.712 165.918 57.648 163.422 56.016C160.926 54.384 158.094 53.136 154.926 52.272C151.854 51.408 148.014 50.976 143.406 50.976H136.638V70.672H117.63V13.672H136.638Z"
+        fill="currentColor"
+      />
+      <path
+        d="M75.865 84.191C73.608 84.512 71.12 84.672 68.4 84.672H26.352C19.632 84.672 14.352 83.712 10.512 81.792C6.672 79.872 3.936 76.992 2.304 73.152C0.768001 69.312 0 64.56 0 58.896V25.632C0 20.064 0.768001 15.408 2.304 11.664C3.84 7.824 6.528 4.944 10.368 3.024C14.208 1.008 19.536 0 26.352 0H68.4C71.135 0 73.623 0.166992 75.865 0.500992V13.672H92.928C94.048 17.033 94.608 21.019 94.608 25.632V58.896C94.608 63.392 94.078 67.318 93.017 70.672H75.865V84.191ZM30.528 70.848H64.368C67.92 70.848 70.656 69.936 72.576 68.112C74.592 66.288 75.6 63.792 75.6 60.624V23.904C75.6 21.12 74.592 18.768 72.576 16.848C70.56 14.832 67.824 13.824 64.368 13.824H30.528C27.072 13.824 24.288 14.736 22.176 16.56C20.064 18.384 19.008 20.832 19.008 23.904V60.624C19.008 63.888 20.016 66.432 22.032 68.256C24.144 69.984 26.976 70.848 30.528 70.848Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * OKE "O" icon mark — compact brand for collapsed sidebar / tight chrome.
+ *
+ * @param props - Standard SVG attributes; `className` controls size and color
+ */
+export function OkeLogoIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 95 85"
+      fill="none"
+      role="img"
+      aria-label="OKE"
+      className={cn("text-foreground", className)}
+      {...props}
+    >
+      <path
+        d="M75.865 84.191C73.608 84.512 71.12 84.672 68.4 84.672H26.352C19.632 84.672 14.352 83.712 10.512 81.792C6.672 79.872 3.936 76.992 2.304 73.152C0.768001 69.312 0 64.56 0 58.896V25.632C0 20.064 0.768001 15.408 2.304 11.664C3.84 7.824 6.528 4.944 10.368 3.024C14.208 1.008 19.536 0 26.352 0H68.4C71.135 0 73.623 0.166992 75.865 0.500992V13.672H92.928C94.048 17.033 94.608 21.019 94.608 25.632V58.896C94.608 63.392 94.078 67.318 93.017 70.672H75.865V84.191ZM30.528 70.848H64.368C67.92 70.848 70.656 69.936 72.576 68.112C74.592 66.288 75.6 63.792 75.6 60.624V23.904C75.6 21.12 74.592 18.768 72.576 16.848C70.56 14.832 67.824 13.824 64.368 13.824H30.528C27.072 13.824 24.288 14.736 22.176 16.56C20.064 18.384 19.008 20.832 19.008 23.904V60.624C19.008 63.888 20.016 66.432 22.032 68.256C24.144 69.984 26.976 70.848 30.528 70.848Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}