alinea 2.0.0-preview.2 → 2.0.0-preview.4

package/dist/index.css

@@ -1567,6 +1567,7 @@
 .alinea-ListLabel {
   color: var(--alinea-fg-muted);
   border: none;
+  flex-wrap: wrap;
   align-items: flex-start;
   min-height: auto;
   margin-bottom: 8px;
@@ -3216,6 +3217,24 @@
       font-size: 12px;
     }
   }
+  &[data-variant=icon-small] {
+    background: none;
+    border: 0;
+    border-radius: 6px;
+    height: 26px;
+    padding: 0;
+    & .alinea-ToggleButton {
+      border-radius: 6px;
+      width: 26px;
+      min-height: 26px;
+      padding: 0;
+      & [data-slot=icon] {
+        width: 14px;
+        height: 14px;
+        font-size: 14px;
+      }
+    }
+  }
 }
 .alinea-ToggleButton {
   appearance: none;
@@ -3235,6 +3254,7 @@
   gap: 6px;
   padding: 2px 6px;
   font-weight: 550;
+  transition: color .25s ease-out, background-color .25s ease-out;
   display: inline-flex;
   & svg,
   & [data-slot=icon] {
@@ -3519,6 +3539,10 @@
   width: 16px;
   height: 16px;
 }
+.alinea-TreeItem-iconLink {
+  color: inherit;
+  display: flex;
+}
 .alinea-TreeItem-dragHandle {
   background: none;
   border: none;
@@ -3962,6 +3986,10 @@
   font-size: .9em;
   overflow: auto;
 }
+.alinea-DashboardErrorBoundary-actions {
+  justify-content: flex-end;
+  display: flex;
+}
 
 /* src/dashboard/app/DashboardLayout.module.css */
 .alinea-DashboardLayout-create {
@@ -5319,6 +5347,9 @@
   min-height: 0;
   position: relative;
   overflow: hidden;
+  &.alinea-is-compact {
+    border-radius: 0;
+  }
 }
 .alinea-ExplorerTable {
   box-sizing: border-box;
@@ -5658,6 +5689,20 @@
   padding: 8px;
   display: flex;
 }
+.alinea-LinkPickerCompact-footer {
+  border-top: 1px solid var(--alinea-border);
+  flex: none;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  display: flex;
+}
+.alinea-LinkPickerCompact-selection {
+  color: var(--alinea-fg-muted);
+  font-size: 13px;
+  line-height: 20px;
+}
 
 /* src/dashboard/app/LocaleMenu.module.css */
 .alinea-LocaleMenu-trigger {
@@ -5853,6 +5898,345 @@
   }
 }
 
+/* src/dashboard/app/pages/SplashPage.module.css */
+.alinea-SplashPage {
+  background: var(--alinea-backdrop);
+  width: 100%;
+  min-width: 0;
+  min-height: 100%;
+  color: var(--alinea-fg);
+  justify-content: center;
+  align-items: safe center;
+  padding: 24px;
+  display: flex;
+}
+.alinea-SplashPage-content {
+  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
+  align-items: start;
+  gap: clamp(24px, 3vw, 40px);
+  width: 100%;
+  max-width: 1240px;
+  display: grid;
+}
+.alinea-SplashPage-sidebar {
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  min-height: calc(100dvh - 48px);
+  display: flex;
+  position: sticky;
+  top: 24px;
+}
+.alinea-SplashPage-sidebar-content {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+.alinea-SplashPage-user {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 38px;
+  color: var(--alinea-fg);
+  font-size: var(--alinea-font-size-base);
+  border: 1px solid #0000;
+  align-items: center;
+  gap: 9px;
+  padding: 3px 8px;
+  font-weight: 500;
+  display: flex;
+}
+.alinea-SplashPage-user-label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+}
+.alinea-SplashPage-action {
+  width: 100%;
+  min-width: 0;
+  min-height: 38px;
+  color: var(--alinea-fg-muted);
+  justify-content: flex-start;
+  gap: 9px;
+  font-weight: 400;
+  transition:
+    color .25s ease-out,
+    background-color .25s ease-out,
+    box-shadow .25s ease-out;
+}
+.alinea-SplashPage-action[data-hovered] {
+  color: var(--alinea-fg);
+  background: var(--alinea-bg);
+  box-shadow: var(--alinea-shadow);
+}
+.alinea-SplashPage-search-label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+}
+.alinea-SplashPage-actionIcon {
+  flex-shrink: 0;
+  font-size: 16px;
+}
+.alinea-SplashPage-appearance {
+  min-height: 38px;
+  color: var(--alinea-fg-muted);
+  font-size: var(--alinea-font-size-base);
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 4px 5px 4px 9px;
+  display: flex;
+}
+.alinea-SplashPage-appearance-label {
+  font-size: inherit;
+}
+.alinea-SplashPage-grid {
+  column-count: 2;
+  align-self: center;
+  column-gap: 16px;
+  width: 100%;
+  padding-block: 12px;
+}
+.alinea-SplashPage-card {
+  --alinea-card-fg: var(--alinea-fg-muted);
+  --alinea-card-fg-strong: var(--alinea-fg-muted);
+  --alinea-card-fg-subtle: var(--alinea-fg-muted);
+  break-inside: avoid;
+  cursor: pointer;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  margin-bottom: 16px;
+  transition: box-shadow .25s ease-out;
+  display: flex;
+}
+.alinea-SplashPage-card:hover,
+.alinea-SplashPage-card:focus-within,
+.alinea-SplashPage-card:has(.alinea-SplashPage-root[data-pressed]) {
+  --alinea-card-fg: var(--alinea-fg);
+  --alinea-card-fg-strong: var(--alinea-fg-strong);
+  --alinea-card-fg-subtle: var(--alinea-fg-subtle);
+  box-shadow: var(--alinea-shadow-modal), inset 0 0 0 1px var(--alinea-border-hover);
+}
+.alinea-SplashPage-card-header {
+  flex-wrap: nowrap;
+  align-items: center;
+  min-width: 0;
+  min-height: 50px;
+  display: flex;
+}
+.alinea-SplashPage-card-header-title {
+  flex: 0 auto;
+  min-width: 0;
+  max-width: 52%;
+}
+.alinea-SplashPage-card-header-button {
+  text-align: left;
+  --alinea-button-bg: transparent;
+  --alinea-button-hovered: transparent;
+  border: 0;
+  border-radius: 0;
+  align-items: center;
+  gap: 12px;
+  max-width: 100%;
+  min-height: 48px;
+  padding: 8px 10px 8px 14px;
+  display: flex;
+}
+.alinea-SplashPage-card-header-button[data-hovered] {
+  background: none;
+}
+.alinea-SplashPage-card-header-content {
+  flex: 0 auto;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  display: flex;
+}
+.alinea-SplashPage-card-header-label {
+  min-width: 0;
+  color: var(--alinea-card-fg-strong);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  font-size: 13px;
+  font-weight: 600;
+  transition: color .25s ease-out;
+  overflow: hidden;
+}
+.alinea-SplashPage-entries {
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+  padding: 2px 14px 13px;
+  display: flex;
+}
+.alinea-SplashPage-entries:empty {
+  display: none;
+}
+.alinea-SplashPage-entry {
+  --alinea-button-bg: transparent;
+  --alinea-button-hovered: transparent;
+  border: 0;
+  border-radius: 6px;
+  width: auto;
+  max-width: 100%;
+  min-height: 41px;
+  padding: 4px 0 5px;
+  font-weight: 400;
+  display: inline-flex;
+}
+.alinea-SplashPage-entry[data-hovered] {
+  background: none;
+}
+.alinea-SplashPage-entry-visual {
+  width: 14px;
+  height: 14px;
+  color: var(--alinea-fg-muted);
+  background: var(--alinea-bg);
+  border-radius: 3px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+}
+.alinea-SplashPage-entry-visual-icon {
+  font-size: 11px;
+}
+.alinea-SplashPage-entry-time {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.alinea-SplashPage-entry-content {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+  min-width: 0;
+  display: flex;
+}
+.alinea-SplashPage-entry-primary {
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  display: flex;
+}
+.alinea-SplashPage-entry-title {
+  min-width: 0;
+  color: var(--alinea-card-fg-strong);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  transition: color .25s ease-out;
+  overflow: hidden;
+}
+.alinea-SplashPage-entry[data-hovered] .alinea-SplashPage-entry-title {
+  text-underline-offset: 2px;
+  text-decoration: underline;
+}
+.alinea-SplashPage-entry-meta {
+  min-width: 0;
+  color: var(--alinea-card-fg-subtle);
+  font-size: inherit;
+  white-space: nowrap;
+  gap: 4px;
+  font-weight: 400;
+  line-height: 1.2;
+  transition: color .25s ease-out;
+  display: flex;
+  overflow: hidden;
+}
+.alinea-SplashPage-entry-user {
+  text-overflow: ellipsis;
+  min-width: 0;
+  overflow: hidden;
+}
+.alinea-SplashPage-card-footer {
+  opacity: 0;
+  pointer-events: none;
+  flex-wrap: nowrap;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 4px 6px;
+  min-width: 0;
+  min-height: 50px;
+  padding: 6px 12px 6px 2px;
+  transition: opacity .25s ease-out;
+  display: flex;
+  overflow: hidden;
+}
+.alinea-SplashPage-card:hover .alinea-SplashPage-card-footer,
+.alinea-SplashPage-card:focus-within .alinea-SplashPage-card-footer,
+.alinea-SplashPage-card:has(.alinea-SplashPage-root[data-pressed]) .alinea-SplashPage-card-footer {
+  opacity: 1;
+  pointer-events: auto;
+}
+.alinea-SplashPage-root {
+  min-width: 0;
+  max-width: 132px;
+  min-height: 28px;
+  color: var(--alinea-card-fg-subtle);
+  opacity: .62;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  --alinea-button-bg: transparent;
+  --alinea-button-hovered: transparent;
+  padding-inline: 6px;
+  font-size: 12px;
+  font-weight: 400;
+  transition: color .25s ease-out, opacity .25s ease-out;
+  overflow: hidden;
+}
+.alinea-SplashPage-root[data-hovered] {
+  color: var(--alinea-fg);
+  opacity: 1;
+}
+.alinea-SplashPage-root-menuIcon {
+  flex-shrink: 0;
+  font-size: 16px;
+}
+@media (hover: none), (pointer: coarse) {
+  .alinea-SplashPage-card-footer {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media (width <= 1100px) {
+  .alinea-SplashPage-grid {
+    column-count: 1;
+  }
+}
+@media (width <= 760px) {
+  .alinea-SplashPage-content {
+    display: block;
+  }
+  .alinea-SplashPage-sidebar {
+    min-height: 0;
+    margin-bottom: 16px;
+    position: static;
+  }
+  .alinea-SplashPage-sidebar-content {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    display: grid;
+  }
+  .alinea-SplashPage-appearance {
+    grid-column: 1 / -1;
+  }
+}
+@media (width <= 600px) {
+  .alinea-SplashPage {
+    padding: 8px;
+  }
+  .alinea-SplashPage-sidebar {
+    margin-bottom: 8px;
+  }
+}
+
 /* src/dashboard/app/pages/UsersPage.module.css */
 .alinea-UsersPage {
   background: var(--alinea-bg);
@@ -6548,15 +6932,21 @@
   height: 24px;
   display: inline-flex;
 }
+.alinea-WorkspaceMenu-avatar-large {
+  width: 32px;
+  height: 32px;
+}
 .alinea-WorkspaceMenu-avatar-logo {
   width: 100%;
   height: 100%;
 }
 .alinea-WorkspaceMenu-avatarTrigger {
   justify-content: center;
+  align-items: center;
   width: 32px;
   height: 32px;
   padding: 0;
+  display: flex;
 }
 .alinea-WorkspaceMenu-trigger {
   cursor: pointer;
@@ -6637,8 +7027,9 @@
 }
 .alinea-WorkspaceRoots-profile-popover {
   min-width: 260px;
+  font-size: var(--alinea-font-size-base);
   margin: 0;
-  padding: 0;
+  padding: 4px;
   list-style: none;
 }
 .alinea-WorkspaceRoots-profile-popover-surface {
@@ -6647,58 +7038,75 @@
 }
 .alinea-WorkspaceRoots-profile-popover-user,
 .alinea-WorkspaceRoots-profile-popover-item {
-  justify-content: space-between;
+  min-height: 38px;
+  font-size: inherit;
   align-items: center;
-  gap: 16px;
-  padding: 8px 16px;
-  font-size: 14px;
+  gap: 9px;
+  padding: 3px 8px;
   display: flex;
 }
-.alinea-WorkspaceRoots-profile-popover-user,
-.alinea-WorkspaceRoots-profile-popover-item:not(:last-child) {
-  border-bottom: 1px solid var(--alinea-border);
+.alinea-WorkspaceRoots-profile-popover-user {
+  color: var(--alinea-fg);
+  font-weight: 400;
+}
+.alinea-WorkspaceRoots-profile-popover-item {
+  color: var(--alinea-fg-muted);
+  justify-content: space-between;
+  font-weight: 400;
 }
 .alinea-WorkspaceRoots-profile-popover-user-icon {
   flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  width: 20px;
-  height: 20px;
-  display: inline-flex;
+  font-size: 16px;
 }
 .alinea-WorkspaceRoots-profile-popover-user-title {
+  min-width: 0;
+  font-size: var(--alinea-font-size-base);
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: 1;
-  min-width: 0;
+  font-weight: 500;
   overflow: hidden;
 }
 .alinea-WorkspaceRoots-profile-popover-item-label {
+  color: var(--alinea-fg-muted);
+  font-size: var(--alinea-font-size-base);
   margin: 0;
-}
-.alinea-WorkspaceRoots-profile-popover-themeOptions {
-  gap: 8px;
-  display: flex;
+  font-weight: 400;
+  line-height: 24px;
 }
 .alinea-WorkspaceRoots-profile-popover-action {
-  padding: 4px;
-  font-size: 14px;
+  font-size: inherit;
+  padding: 0;
   display: flex;
 }
-.alinea-WorkspaceRoots-profile-popover-action:first-of-type {
-  border-top: 1px solid var(--alinea-border);
-}
 .alinea-WorkspaceRoots-profile-popover-action-button {
-  border-radius: 4px;
-  justify-content: flex-start;
-  gap: 8px;
   width: 100%;
-  font-weight: 500;
+  min-height: 38px;
+  font-size: var(--alinea-font-size-base);
+  border-radius: 8px;
+  justify-content: flex-start;
+  gap: 9px;
+  padding: 3px 8px;
+  font-weight: 400;
+  &[data-appearance=plain] {
+    --alinea-button-default-plain-color: var(--alinea-fg-muted);
+  }
+  &[data-hovered] {
+    --alinea-button-default-plain-color: var(--alinea-fg);
+  }
+}
+.alinea-WorkspaceRoots-profile-popover-action-icon {
+  flex-shrink: 0;
+  font-size: 16px;
 }
 .alinea-WorkspaceRoots-profile-popover-action-label {
+  min-width: 0;
+  color: inherit;
+  font-size: var(--alinea-font-size-base);
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 0;
+  font-weight: 400;
+  line-height: 24px;
   overflow: hidden;
 }
 .alinea-WorkspaceRoots-trigger {

package/dist/preview/PreviewMessage.d.ts

@@ -2,6 +2,7 @@ import type { PreviewMetadata, PreviewPayload } from 'alinea/core/Preview';
 export declare enum PreviewAction {
     Ping = "[alinea-ping]",
     Pong = "[alinea-pong]",
+    Disconnect = "[alinea-disconnect]",
     Reload = "[alinea-reload]",
     Refetch = "[alinea-refetch]",
     Previous = "[alinea-previous]",
@@ -13,6 +14,8 @@ export type PreviewMessage = {
     action: PreviewAction.Ping;
 } | {
     action: PreviewAction.Pong;
+} | {
+    action: PreviewAction.Disconnect;
 } | {
     action: PreviewAction.Reload;
 } | {

package/dist/preview/PreviewMessage.js

@@ -4,6 +4,7 @@ import "../chunks/chunk-CQ52GEHY.js";
 var PreviewAction = /* @__PURE__ */ ((PreviewAction2) => {
   PreviewAction2["Ping"] = "[alinea-ping]";
   PreviewAction2["Pong"] = "[alinea-pong]";
+  PreviewAction2["Disconnect"] = "[alinea-disconnect]";
   PreviewAction2["Reload"] = "[alinea-reload]";
   PreviewAction2["Refetch"] = "[alinea-refetch]";
   PreviewAction2["Previous"] = "[alinea-previous]";

package/dist/preview/RegisterPreview.d.ts

@@ -3,4 +3,4 @@ export interface PreviewApi {
     preview(update: PreviewPayload): Promise<void>;
     setIsPreviewing(isPreviewing: boolean): void;
 }
-export declare function registerPreview(api: PreviewApi): (() => void) | undefined;
+export declare function registerPreview(api: PreviewApi, hostOrigin: string): (() => void) | undefined;

package/dist/preview/RegisterPreview.js

@@ -2,22 +2,38 @@ import "../chunks/chunk-CQ52GEHY.js";
 
 // src/preview/RegisterPreview.ts
 import { PreviewAction } from "alinea/preview/PreviewMessage";
-function registerPreview(api) {
+function registerPreview(api, hostOrigin) {
   if (typeof window === "undefined") return;
+  const host = window.parent !== window ? window.parent : window.opener;
+  if (!host) return;
   let observer = null;
-  if (window.location !== window.parent.location) {
-    window.parent.postMessage({ action: PreviewAction.Ping }, "*");
-    addEventListener("message", handleMessage);
-    console.info("[Alinea preview listener attached]");
-  }
+  const checkHost = window.setInterval(() => {
+    if (host.closed) disconnect();
+  }, 1e3);
+  addEventListener("message", handleMessage);
+  host.postMessage({ action: PreviewAction.Ping }, hostOrigin);
+  console.info("[Alinea preview listener attached]");
   return () => {
+    clearInterval(checkHost);
     if (observer) observer.disconnect();
     removeEventListener("message", handleMessage);
   };
+  function disconnect() {
+    clearInterval(checkHost);
+    observer?.disconnect();
+    observer = null;
+    api.setIsPreviewing(false);
+    removeEventListener("message", handleMessage);
+  }
   function handleMessage(event) {
+    if (event.source !== host) return;
+    if (event.origin !== hostOrigin) return;
     if (!event.data || typeof event.data !== "object") return;
     const message = event.data;
     switch (message.action) {
+      case PreviewAction.Disconnect:
+        disconnect();
+        return;
       case PreviewAction.Preview:
         console.info("[Alinea preview received]");
         api.preview(message);
@@ -36,6 +52,7 @@ function registerPreview(api) {
         api.setIsPreviewing(true);
         try {
           fetchAndSendMetadata();
+          observer?.disconnect();
           observer = new MutationObserver(fetchAndSendMetadata);
           observer.observe(document.head, { childList: true });
           console.info("[Alinea meta data sent to parent]");
@@ -44,10 +61,11 @@ function registerPreview(api) {
         }
     }
   }
-}
-function fetchAndSendMetadata() {
-  const meta = fetchMetadataFromDocument();
-  window.parent.postMessage({ action: PreviewAction.Meta, ...meta }, "*");
+  function fetchAndSendMetadata() {
+    if (!host) return;
+    const meta = fetchMetadataFromDocument();
+    host.postMessage({ action: PreviewAction.Meta, ...meta }, hostOrigin);
+  }
 }
 function fetchMetadataFromDocument() {
   return {

package/dist/preview/react.d.ts

@@ -1,4 +1,8 @@
 import { type PreviewApi } from './RegisterPreview.js';
-export declare function usePreview(api: Omit<PreviewApi, 'setIsPreviewing'>): {
+export interface UsePreviewOptions {
+    hostOrigin: string;
+    preview: PreviewApi['preview'];
+}
+export declare function usePreview(options: UsePreviewOptions): {
     isPreviewing: boolean;
 };

package/dist/preview/react.js

@@ -3,18 +3,21 @@ import "../chunks/chunk-CQ52GEHY.js";
 // src/preview/react.ts
 import { useEffect, useRef, useState } from "react";
 import { registerPreview } from "./RegisterPreview.js";
-function usePreview(api) {
+function usePreview(options) {
   const [isPreviewing, setIsPreviewing] = useState(false);
-  const apiRef = useRef(api);
-  apiRef.current = api;
+  const previewRef = useRef(options.preview);
+  previewRef.current = options.preview;
   useEffect(() => {
-    return registerPreview({
-      preview(update) {
-        return apiRef.current.preview(update);
+    return registerPreview(
+      {
+        preview(update) {
+          return previewRef.current(update);
+        },
+        setIsPreviewing
       },
-      setIsPreviewing
-    });
-  }, []);
+      options.hostOrigin
+    );
+  }, [options.hostOrigin]);
   return { isPreviewing };
 }
 export {