@unitninety/site-kit 0.0.0-stage → 1.6.2

package/src/features/client/overlay.tsx

@@ -0,0 +1,129 @@
+'use client'
+import { useEffect, useRef, type ReactNode } from 'react'
+import { useFeatureOverlay, useSiteFeatures, type OverlayName } from './context'
+
+/** Geometry-neutral dialog primitive for default and fully custom presentations. */
+export function FeatureDialog({
+  name,
+  label,
+  children,
+  className = '',
+}: {
+  name: OverlayName
+  label: string
+  children: ReactNode
+  className?: string
+}) {
+  const { active, close } = useFeatureOverlay()
+  const { error, refresh } = useSiteFeatures()
+  const ref = useRef<HTMLDivElement>(null)
+  const opened = active === name
+  useEffect(() => {
+    if (!opened || !ref.current) return
+    const panel = ref.current
+    const focusable = () =>
+      Array.from(
+        panel.querySelectorAll<HTMLElement>(
+          'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+        ),
+      ).filter(
+        (node) =>
+          node.tabIndex >= 0 &&
+          !node.matches(':disabled') &&
+          !node.closest('[hidden], [inert], [aria-hidden="true"]') &&
+          // Layout boxes account for display:none on any ancestor (and closed
+          // details), unlike checking only the control's own computed display.
+          node.getClientRects().length > 0 &&
+          getComputedStyle(node).visibility === 'visible',
+      )
+    // The provider owns its foreground modal (including native top-layer
+    // inertness). Keep this feature mounted, but do not compete for its focus.
+    const externalModalOwnsFocus = (target: EventTarget | null = document.activeElement) => {
+      if (
+        Array.from(document.querySelectorAll('dialog[open]')).some(
+          (dialog) => dialog.matches(':modal') && !dialog.contains(panel),
+        )
+      )
+        return true
+      const modal =
+        target instanceof HTMLElement
+          ? target.closest(
+              '[role="dialog"][aria-modal="true"], [role="alertdialog"][aria-modal="true"]',
+            )
+          : null
+      return Boolean(modal && modal !== panel && !modal.contains(panel))
+    }
+    const focus = () => (focusable()[0] ?? panel).focus()
+    if (!externalModalOwnsFocus()) focus()
+    // Capture ownership while a native dialog is still in the top layer. Its
+    // target handler may close/remove it before the bubbling feature handler.
+    const externalModalKeydowns = new WeakSet<KeyboardEvent>()
+    const captureKeydown = (event: KeyboardEvent) => {
+      if (externalModalOwnsFocus(event.target) || externalModalOwnsFocus()) {
+        externalModalKeydowns.add(event)
+      }
+    }
+    const keydown = (event: KeyboardEvent) => {
+      // Use the event origin too: a provider can close/remove its modal before
+      // Escape bubbles here. That same Escape must not dismiss this feature.
+      if (
+        externalModalKeydowns.has(event) ||
+        externalModalOwnsFocus(event.target) ||
+        externalModalOwnsFocus()
+      )
+        return
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        close()
+      }
+      if (event.key !== 'Tab') return
+      const nodes = focusable()
+      const first = nodes[0] ?? panel
+      const last = nodes.at(-1) ?? panel
+      if (
+        !panel.contains(document.activeElement) ||
+        (event.shiftKey && document.activeElement === first) ||
+        (!event.shiftKey && document.activeElement === last) ||
+        document.activeElement === panel
+      ) {
+        event.preventDefault()
+        ;(event.shiftKey ? last : first).focus()
+      }
+    }
+    const contain = (event: FocusEvent) => {
+      if (!externalModalOwnsFocus(event.target) && !panel.contains(event.target as Node)) focus()
+    }
+    document.addEventListener('keydown', captureKeydown, true)
+    document.addEventListener('keydown', keydown)
+    document.addEventListener('focusin', contain)
+    return () => {
+      document.removeEventListener('keydown', captureKeydown, true)
+      document.removeEventListener('keydown', keydown)
+      document.removeEventListener('focusin', contain)
+    }
+  }, [opened, close])
+  if (!opened) return null
+  return (
+    <div
+      ref={ref}
+      role="dialog"
+      aria-modal={true}
+      aria-label={label}
+      tabIndex={-1}
+      className={`u90-feature-dialog ${className}`}
+    >
+      {children}
+      {error && (
+        <div className="u90-feature-retry">
+          {error}
+          <button type="button" onClick={() => void refresh()}>
+            Retry configuration
+          </button>
+        </div>
+      )}
+      <button type="button" onClick={close} aria-label={`Close ${label}`}>
+        Close
+      </button>
+    </div>
+  )
+}

package/src/features/client/styles.css

@@ -0,0 +1,337 @@
+.u90-features {
+  --u90-feature-background: #fff;
+  --u90-feature-foreground: #17202a;
+  --u90-feature-accent: #1746a2;
+  --u90-feature-radius: 1rem;
+  --u90-feature-shadow: 0 8px 40px #0003;
+  color: var(--u90-feature-foreground);
+  font:
+    1rem/1.5 system-ui,
+    sans-serif;
+}
+.u90-features .u90-feature-dialog {
+  background: var(--u90-feature-background);
+  color: var(--u90-feature-foreground);
+  border-radius: var(--u90-feature-radius);
+  box-shadow: var(--u90-feature-shadow);
+  padding: 1.5rem;
+}
+.u90-features :focus-visible {
+  outline: 3px solid var(--u90-feature-accent);
+  outline-offset: 3px;
+}
+.u90-features .u90-feature-announcement {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.u90-features .u90-feature-retry {
+  background: var(--u90-feature-background);
+  color: var(--u90-feature-foreground);
+  padding: 1rem;
+}
+.u90-features .u90-feedback-launcher {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 90;
+  background: var(--u90-feature-accent);
+  color: #fff;
+  padding: 0.75rem 1.25rem;
+  border: 0;
+  border-radius: var(--u90-feature-radius);
+  cursor: pointer;
+}
+.u90-features .u90-feedback-panel {
+  position: fixed;
+  z-index: 100;
+  right: 1rem;
+  bottom: 4.5rem;
+  width: min(24rem, calc(100vw - 2rem));
+  max-height: calc(100dvh - 6rem);
+  overflow: auto;
+}
+.u90-features .u90-feedback-panel h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+.u90-features .u90-feedback-page {
+  font-size: 0.875rem;
+  overflow-wrap: anywhere;
+  margin: 0.75rem 0;
+}
+.u90-features .u90-feedback-ratings {
+  display: flex;
+  gap: 1rem;
+  margin: 0.75rem 0;
+}
+.u90-features .u90-feedback-ratings label {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.u90-features .u90-feedback-comment {
+  display: block;
+  margin: 1rem 0;
+}
+.u90-features .u90-feedback-comment textarea {
+  display: block;
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid currentColor;
+  border-radius: 0.25rem;
+  background: var(--u90-feature-background);
+  color: var(--u90-feature-foreground);
+}
+.u90-features .u90-feedback-panel button {
+  cursor: pointer;
+  padding: 0.5rem 0.75rem;
+  margin: 0.25rem 0.25rem 0.25rem 0;
+  border: 1px solid currentColor;
+  border-radius: 0.25rem;
+}
+.u90-features .u90-feedback-submit {
+  background: var(--u90-feature-accent);
+  color: #fff;
+}
+@media (max-width: 767px) {
+  .u90-features .u90-feedback-panel {
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    max-height: 85dvh;
+    border-radius: var(--u90-feature-radius) var(--u90-feature-radius) 0 0;
+  }
+}
+/* Ask AI owns its presentation variables; saved appearance does not recolour Feedback. */
+.u90-features .u90-ai-launcher {
+  position: fixed;
+  right: 1rem;
+  bottom: 4.5rem;
+  z-index: 90;
+  background: var(--u90-ai-accent);
+  color: var(--u90-ai-on-accent);
+  padding: 0.75rem 1.25rem;
+  border: 0;
+  border-radius: var(--u90-ai-radius);
+  cursor: pointer;
+}
+.u90-features .u90-ai-panel {
+  position: fixed;
+  z-index: 100;
+  right: 1rem;
+  top: calc(var(--u90-ai-top) + 1rem);
+  width: min(28rem, calc(100vw - 2rem));
+  height: min(42rem, calc(var(--u90-ai-height) - 2rem));
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border-radius: var(--u90-ai-radius);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.u90-ai-panel h2 {
+  font-size: 1.4rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.u90-ai-panel button {
+  padding: 0.4rem 0.65rem;
+  border: 1px solid currentColor;
+  border-radius: 0.3rem;
+  cursor: pointer;
+  font: inherit;
+}
+.u90-ai-panel button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.u90-ai-panel :focus-visible {
+  outline: 3px solid currentColor;
+  outline-offset: 3px;
+}
+.u90-ai-log {
+  flex: 1;
+  min-height: 4rem;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 0.4rem;
+}
+.u90-ai-message {
+  margin: 0 0 1rem;
+  padding: 0.75rem;
+  background: #f2f4f6;
+  border-radius: 0.5rem;
+  overflow-wrap: anywhere;
+}
+.u90-ai-user {
+  background: #e8edf6;
+}
+.u90-ai-role {
+  font-size: 0.8rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem;
+}
+.u90-ai-text {
+  white-space: pre-wrap;
+  margin: 0;
+}
+.u90-ai-message ul {
+  margin: 0.6rem 0;
+  padding-left: 1.2rem;
+}
+.u90-ai-message a {
+  text-decoration: underline;
+}
+.u90-ai-ratings {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+}
+.u90-ai-ratings [aria-pressed='true'] {
+  font-weight: bold;
+  outline: 2px solid currentColor;
+}
+.u90-ai-composer {
+  flex-shrink: 0;
+}
+.u90-ai-composer label {
+  display: block;
+  font-size: 0.85rem;
+}
+.u90-ai-composer textarea {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  resize: none;
+  border: 1px solid #64748b;
+  border-radius: 0.25rem;
+  background: #fff;
+  color: #17202a;
+  padding: 0.5rem;
+  font: inherit;
+  font-size: 1rem;
+}
+.u90-ai-composer > div {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.4rem;
+  flex-wrap: wrap;
+}
+.u90-ai-panel .u90-ai-send {
+  background: var(--u90-ai-accent, #1746a2);
+  color: var(--u90-ai-on-accent, #fff);
+  border-color: transparent;
+}
+.u90-ai-progress {
+  font-size: 0.8rem;
+  min-height: 1.2em;
+  margin: 0;
+}
+.u90-ai-error {
+  font-size: 0.85rem;
+  max-height: 7rem;
+  overflow: auto;
+  color: #8c2525;
+}
+.u90-ai-error p {
+  margin: 0.2rem 0;
+}
+.u90-ai-error button {
+  margin-right: 0.4rem;
+}
+.u90-ai-state {
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+.u90-ai-suggestions {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  font-size: 0.85rem;
+}
+@media (max-width: 767px) {
+  .u90-features .u90-ai-panel {
+    right: 0;
+    top: calc(var(--u90-ai-top) + 0.25rem);
+    width: 100%;
+    height: calc(var(--u90-ai-height) - 0.5rem);
+    padding: 1rem;
+    border-radius: var(--u90-ai-radius) var(--u90-ai-radius) 0 0;
+  }
+  .u90-ai-composer {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .u90-ai * {
+    scroll-behavior: auto !important;
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* Native verification dialogs live outside .u90-features in the top layer.
+ * Scope their host-reset protection and preserve the shared theme override hooks. */
+.u90-verification-dialog {
+  position: fixed;
+  inset: 0;
+  box-sizing: border-box;
+  margin: auto;
+  width: min(24rem, calc(100vw - 2rem));
+  height: fit-content;
+  max-height: calc(100dvh - 2rem);
+  overflow: auto;
+  padding: 1.25rem;
+  border: 1px solid #8886;
+  border-radius: var(--u90-feature-radius, 1rem);
+  background: var(--u90-feature-background, #fff);
+  color: var(--u90-feature-foreground, #17202a);
+  box-shadow: var(--u90-feature-shadow, 0 8px 40px #0003);
+  font:
+    1rem/1.5 system-ui,
+    sans-serif;
+}
+.u90-verification-dialog[open] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.u90-verification-dialog::backdrop {
+  background: #0006;
+}
+.u90-verification-dialog > p {
+  color: inherit;
+  margin: 0;
+  font-weight: 600;
+}
+.u90-verification-dialog > div {
+  max-width: 100%;
+}
+.u90-verification-dialog button {
+  padding: 0.6rem 1rem;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.u90-verification-dialog :focus-visible {
+  outline: 3px solid var(--u90-feature-accent, #1746a2);
+  outline-offset: 3px;
+}
+@media (prefers-color-scheme: dark) {
+  .u90-verification-dialog {
+    background: var(--u90-feature-background, #17202a);
+    color: var(--u90-feature-foreground, #f8fafc);
+  }
+  .u90-verification-dialog :focus-visible {
+    outline-color: var(--u90-feature-accent, #8ab4ff);
+  }
+}