@lapismd/design-core 0.1.0

package/src/shared/workspace/popout/AppShellPopoutLayer.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { mount, onMount, unmount } from "svelte";
+  import {
+    createBrowserPopoutHost,
+    type WorkspacePopoutHost,
+  } from "../core/index.js";
+  import type { WorkspaceTheme } from "../core/types.js";
+  import type { ScrollAreaVisibility } from "../../shadcn/scroll-area/index.js";
+  import { getAppShellContext } from "../app-shell/app-shell-context.svelte.js";
+  import WorkspacePopoutSurface from "./WorkspacePopoutSurface.svelte";
+
+  let {
+    host,
+    theme = "inherit",
+    scrollbarVisibility = "scroll",
+  }: {
+    host?: WorkspacePopoutHost | null;
+    theme?: WorkspaceTheme;
+    scrollbarVisibility?: ScrollAreaVisibility;
+  } = $props();
+
+  const { controller, drag } = getAppShellContext();
+  const mounts = new Map<
+    string,
+    {
+      component: ReturnType<typeof mount>;
+      theme: WorkspaceTheme;
+      scrollbarVisibility: ScrollAreaVisibility;
+    }
+  >();
+
+  $effect(() => {
+    const liveIds = new Set(
+      controller.renderer.layout.windows
+        .filter((workspaceWindow) => workspaceWindow.mode === "popout")
+        .map((workspaceWindow) => workspaceWindow.id),
+    );
+    for (const [id, entry] of mounts) {
+      if (!liveIds.has(id)) {
+        void unmount(entry.component);
+        mounts.delete(id);
+      }
+    }
+    for (const workspaceWindow of controller.renderer.layout.windows) {
+      if (workspaceWindow.mode !== "popout") continue;
+      const handle = controller.renderer.getPopoutHandle(workspaceWindow.id);
+      if (!handle) continue;
+      const target = handle.document.body;
+      Object.assign(target.style, {
+        width: "100vw",
+        height: "100vh",
+        margin: "0",
+        overflow: "hidden",
+      });
+      const existing = mounts.get(workspaceWindow.id);
+      if (
+        existing?.theme === theme &&
+        existing.scrollbarVisibility === scrollbarVisibility
+      ) {
+        continue;
+      }
+      if (existing) void unmount(existing.component);
+      target.replaceChildren();
+      const component = mount(WorkspacePopoutSurface, {
+        target,
+        props: {
+          controller: controller.renderer,
+          window: workspaceWindow,
+          drag,
+          theme,
+          scrollbarVisibility,
+        },
+      });
+      mounts.set(workspaceWindow.id, {
+        component,
+        theme,
+        scrollbarVisibility,
+      });
+    }
+  });
+
+  onMount(() => {
+    controller.renderer.setPopoutHost(
+      host === undefined ? createBrowserPopoutHost() : host,
+    );
+    return () => {
+      controller.renderer.setPopoutHost(null);
+      for (const entry of mounts.values()) void unmount(entry.component);
+      mounts.clear();
+    };
+  });
+</script>

package/src/shared/workspace/popout/WorkspaceOverlayPortalFixture.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Button } from "../../shadcn/button/index.js";
+  import * as DropdownMenu from "../../shadcn/dropdown-menu/index.js";
+  import * as HoverCard from "../../shadcn/hover-card/index.js";
+  import type { WorkspaceViewContext } from "../core/types.js";
+
+  let { tab }: WorkspaceViewContext = $props();
+</script>
+
+<div class="ui-workspace-overlay-portal-fixture" aria-label={tab.title}>
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props })}
+        <Button {...props} variant="outline">Open fixture menu</Button>
+      {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content>
+      <DropdownMenu.Item>Popup-only action</DropdownMenu.Item>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+
+  <HoverCard.Root>
+    <HoverCard.Trigger>
+      {#snippet child({ props })}
+        <Button {...props} variant="outline">Preview fixture link</Button>
+      {/snippet}
+    </HoverCard.Trigger>
+    <HoverCard.Content class="ui-workspace-overlay-portal-fixture__preview">
+      <strong>Popup-only preview</strong>
+      <button type="button">Preview action</button>
+    </HoverCard.Content>
+  </HoverCard.Root>
+</div>
+
+<style>
+  .ui-workspace-overlay-portal-fixture {
+    display: flex;
+    min-height: 16rem;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 2rem;
+  }
+
+  :global(.ui-workspace-overlay-portal-fixture__preview) {
+    display: grid;
+    gap: 0.75rem;
+  }
+</style>

package/src/shared/workspace/popout/WorkspacePopoutSurface.css

@@ -0,0 +1,16 @@
+.ui-workspace-popout-surface {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  color: var(--ui-workspace-foreground);
+  background: var(--ui-workspace-background);
+  font-family: inherit;
+}
+
+.ui-workspace-popout-surface *,
+.ui-workspace-popout-surface *::before,
+.ui-workspace-popout-surface *::after {
+  box-sizing: border-box;
+}

package/src/shared/workspace/popout/WorkspacePopoutSurface.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type {
+    WorkspaceTab,
+    WorkspaceTheme,
+    WorkspaceWindow,
+  } from "../core/types.js";
+  import type { WorkspaceShellController } from "../core/workspace-controller.svelte.js";
+  import type { WorkspaceDragState } from "../drag/workspace-drag.svelte.js";
+  import WorkspaceTree from "../tree/WorkspaceTree.svelte";
+  import { setContext } from "svelte";
+  import { disableOverlayPortalContextKey } from "../../../lib/overlay-portal-context.js";
+  import type { ScrollAreaVisibility } from "../../shadcn/scroll-area/index.js";
+  import "./WorkspacePopoutSurface.css";
+
+  let {
+    controller,
+    window: workspaceWindow,
+    drag,
+    createTab,
+    theme = "inherit",
+    scrollbarVisibility = "scroll",
+  }: {
+    controller: WorkspaceShellController;
+    window: WorkspaceWindow;
+    drag: WorkspaceDragState;
+    createTab?: (paneId: string) => WorkspaceTab;
+    theme?: WorkspaceTheme;
+    scrollbarVisibility?: ScrollAreaVisibility;
+  } = $props();
+
+  setContext(disableOverlayPortalContextKey, true);
+</script>
+
+<div
+  class:dark={theme === "dark"}
+  class="ui-workspace-popout-surface"
+  data-ui-component="workspace-popout-surface"
+  data-ui-part="root"
+  data-workspace-popout-id={workspaceWindow.id}
+  data-workspace-theme={theme}
+  data-ui-scrollbar-visibility={scrollbarVisibility}
+>
+  <WorkspaceTree
+    {controller}
+    node={workspaceWindow.root}
+    hostId={workspaceWindow.id}
+    {drag}
+    {createTab}
+  />
+</div>

package/src/shared/workspace/popout/index.ts

@@ -0,0 +1,2 @@
+export { default as AppShellPopoutLayer } from "./AppShellPopoutLayer.svelte";
+export { default as WorkspacePopoutSurface } from "./WorkspacePopoutSurface.svelte";

package/src/shared/workspace/problems/ProblemsQuickFix.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { DropdownMenu } from "bits-ui";
+  import type { WorkspaceMenu } from "../core/workspace-menu.js";
+  import WorkspaceIcon from "../icon/WorkspaceIcon.svelte";
+  import WorkspaceMenuItems from "../menu/WorkspaceMenuItems.svelte";
+
+  let {
+    menu,
+    severityIcon,
+  }: {
+    menu: WorkspaceMenu;
+    severityIcon: string;
+  } = $props();
+
+  function stopRowActivation(event: Event) {
+    event.stopPropagation();
+  }
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger
+    class="ui-workspace-problems__quick-fix"
+    aria-label="Quick fix"
+    title="Quick fix"
+    onclick={stopRowActivation}
+    onpointerdown={stopRowActivation}
+    onkeydown={stopRowActivation}
+  >
+    <WorkspaceIcon
+      class="ui-workspace-problems__severity"
+      name={severityIcon}
+    />
+    <WorkspaceIcon
+      class="ui-workspace-problems__lightbulb"
+      name="lightbulb"
+    />
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Portal>
+    <DropdownMenu.Content
+      class="ui-workspace-menu__content"
+      data-ui-component="workspace-menu"
+      data-ui-part="content"
+      align="start"
+      side="top"
+      sideOffset={4}
+      strategy="fixed"
+      collisionBoundary={[]}
+      onpointerdown={stopRowActivation}
+    >
+      <WorkspaceMenuItems {menu} />
+    </DropdownMenu.Content>
+  </DropdownMenu.Portal>
+</DropdownMenu.Root>