@xemahq/ui-kernel 0.1.6 → 0.1.8

package/src/session-kit/primitives/RiskPill.tsx

@@ -0,0 +1,95 @@
+/**
+ * Capability risk-tier pill. Reuses the kernel `CapabilityRiskTier`
+ * enum (low / medium / high / critical) — it does NOT define a parallel
+ * string union. Critical renders an optional caller-supplied alert icon
+ * (the kit carries no icon dependency, matching the rest of ui-kernel).
+ *
+ * Risk → colour (HANDOFF §6):
+ *   low      → ink / muted
+ *   medium   → --info
+ *   high     → --warning
+ *   critical → --destructive (always explicit)
+ */
+import { CapabilityRiskTier } from '@xemahq/kernel-contracts/capability';
+
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+
+export { CapabilityRiskTier };
+
+interface RiskStyle {
+  readonly label: string;
+  readonly fg: string;
+  readonly bg: string;
+  readonly bd: string;
+}
+
+const DANGER = 'var(--destructive, var(--danger))';
+
+const RISK: Record<CapabilityRiskTier, RiskStyle> = {
+  [CapabilityRiskTier.Low]: {
+    label: 'Low',
+    fg: 'hsl(var(--ink-3))',
+    bg: 'hsl(var(--muted))',
+    bd: 'hsl(var(--rule))',
+  },
+  [CapabilityRiskTier.Medium]: {
+    label: 'Medium',
+    fg: 'hsl(var(--info))',
+    bg: 'hsl(var(--info) / 0.09)',
+    bd: 'hsl(var(--info) / 0.28)',
+  },
+  [CapabilityRiskTier.High]: {
+    label: 'High',
+    fg: 'hsl(var(--warning))',
+    bg: 'hsl(var(--warning) / 0.1)',
+    bd: 'hsl(var(--warning) / 0.3)',
+  },
+  [CapabilityRiskTier.Critical]: {
+    label: 'Critical',
+    fg: `hsl(${DANGER})`,
+    bg: `hsl(${DANGER} / 0.09)`,
+    bd: `hsl(${DANGER} / 0.32)`,
+  },
+};
+
+export type RiskPillSize = 'xs' | 'sm';
+
+export interface RiskPillProps {
+  readonly tier: CapabilityRiskTier;
+  readonly size?: RiskPillSize;
+  /** Rendered before the label for the `critical` tier (e.g. an alert glyph). */
+  readonly criticalIcon?: ReactNode;
+  readonly style?: CSSProperties;
+}
+
+export function RiskPill({
+  tier,
+  size = 'sm',
+  criticalIcon,
+  style,
+}: RiskPillProps): ReactElement {
+  const r = RISK[tier];
+  return (
+    <span
+      className="mono"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+        padding: size === 'xs' ? '1px 6px' : '2px 8px',
+        fontSize: size === 'xs' ? 9.5 : 10,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        letterSpacing: '0.06em',
+        color: r.fg,
+        background: r.bg,
+        border: `1px solid ${r.bd}`,
+        borderRadius: 5,
+        ...style,
+      }}
+    >
+      {tier === CapabilityRiskTier.Critical && criticalIcon}
+      {r.label}
+    </span>
+  );
+}

package/src/session-kit/primitives/ScopeDot.tsx

@@ -0,0 +1,47 @@
+/**
+ * Biome provenance dot — a tiny colour-coded circle keyed on
+ * `BiomeScope` (system / platform / community).
+ */
+import { BiomeScope } from '../lib/enums';
+
+import type { CSSProperties, ReactElement } from 'react';
+
+
+interface ScopeStyle {
+  readonly color: string;
+  readonly label: string;
+}
+
+const SCOPE: Record<BiomeScope, ScopeStyle> = {
+  [BiomeScope.System]: { color: 'hsl(var(--ink-4))', label: 'System' },
+  [BiomeScope.Platform]: { color: 'hsl(var(--primary))', label: 'Platform' },
+  [BiomeScope.Community]: { color: 'hsl(var(--p-people))', label: 'Community' },
+};
+
+export interface ScopeDotProps {
+  readonly scope: BiomeScope;
+  readonly size?: number;
+  readonly style?: CSSProperties;
+}
+
+export function ScopeDot({
+  scope,
+  size = 7,
+  style,
+}: ScopeDotProps): ReactElement {
+  const s = SCOPE[scope];
+  return (
+    <span
+      title={s.label}
+      style={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        background: s.color,
+        flexShrink: 0,
+        display: 'inline-block',
+        ...style,
+      }}
+    />
+  );
+}

package/src/session-kit/primitives/Segmented.tsx

@@ -0,0 +1,71 @@
+/**
+ * Small segmented control. Generic over the option value type so a
+ * caller can drive it with a closed enum directly.
+ */
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+
+export interface SegmentedOption<V extends string> {
+  readonly value: V;
+  readonly label: ReactNode;
+  /** Optional leading icon node (host-supplied). */
+  readonly icon?: ReactNode;
+}
+
+export type SegmentedSize = 'sm' | 'md';
+
+export interface SegmentedProps<V extends string> {
+  readonly options: ReadonlyArray<SegmentedOption<V>>;
+  readonly value: V;
+  readonly onChange: (value: V) => void;
+  readonly size?: SegmentedSize;
+  readonly style?: CSSProperties;
+}
+
+export function Segmented<V extends string>({
+  options,
+  value,
+  onChange,
+  size = 'sm',
+  style,
+}: SegmentedProps<V>): ReactElement {
+  return (
+    <div
+      style={{
+        display: 'inline-flex',
+        padding: 2,
+        gap: 2,
+        background: 'hsl(var(--paper-sunk))',
+        border: '1px solid hsl(var(--rule))',
+        borderRadius: 8,
+        ...style,
+      }}
+    >
+      {options.map((option) => {
+        const on = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => onChange(option.value)}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 5,
+              padding: size === 'sm' ? '4px 10px' : '6px 12px',
+              fontSize: size === 'sm' ? 12 : 13,
+              fontWeight: on ? 600 : 450,
+              borderRadius: 6,
+              color: on ? 'hsl(var(--ink))' : 'hsl(var(--ink-3))',
+              background: on ? 'hsl(var(--paper-elev))' : 'transparent',
+              boxShadow: on ? 'var(--shadow-2, var(--shadow-1))' : 'none',
+              transition: 'background 140ms ease, color 140ms ease, box-shadow 140ms ease',
+            }}
+          >
+            {option.icon}
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}