@workbench-kit/react 0.0.2-prototype.0.2.25 → 0.0.2-prototype.0.2.27

package/src/workbench/commands/CommandList.tsx

@@ -1,3 +1,4 @@
+import '../views/command-list.css';
 import { useEffect, useId, useRef, type ComponentPropsWithRef, type ReactNode } from 'react';
 import { Button } from '../../primitives/button';
 import { EmptyState } from '../../primitives/empty-state';

package/src/workbench/commands/commands.ts

@@ -13,6 +13,7 @@ import {
 import type { ContextMenuItem } from '../../overlay/ContextMenu';
 
 export const WORKBENCH_OPEN_SETTINGS_COMMAND_ID = 'workbench.openSettings';
+export const WORKBENCH_TOGGLE_FOCUS_MODE_COMMAND_ID = 'workbench.toggleFocusMode';
 export const WORKBENCH_TOGGLE_PRIMARY_SIDEBAR_COMMAND_ID = 'workbench.togglePrimarySidebar';
 export const WORKBENCH_EDITOR_SAVE_COMMAND_ID = 'editor.save';
 export const WORKBENCH_EDITOR_DISCARD_CHANGES_COMMAND_ID = 'editor.discardChanges';
@@ -54,9 +55,11 @@ export interface WorkbenchShellCommandActivity<TActivityId extends string = stri
 }
 
 export interface WorkbenchShellCommandContext<TActivityId extends string = string> {
+  isFocusModeActive?: boolean | undefined;
   isPrimarySidebarVisible: boolean;
   openSettings: () => void;
   showActivity: (activityId: TActivityId) => void;
+  toggleFocusMode?: (() => void) | undefined;
   togglePrimarySidebar: () => void;
 }
 
@@ -96,6 +99,7 @@ function applyWorkbenchCommandOverrides<TContext>(
 
 export interface WorkbenchShellCommandPresetOptions<TActivityId extends string = string> {
   activities: WorkbenchShellCommandActivity<TActivityId>[];
+  includeFocusModeToggle?: boolean | undefined;
   includeSettings?: boolean | undefined;
   includeSidebarToggle?: boolean | undefined;
   menuSeparatorId?: string | undefined;
@@ -159,6 +163,7 @@ export function getWorkbenchShowActivityCommandId(activityId: string) {
 
 export function createWorkbenchShellCommands<TActivityId extends string>({
   activities,
+  includeFocusModeToggle = true,
   includeSettings = true,
   includeSidebarToggle = true,
   settingsIcon = 'codicon-settings-gear',
@@ -179,6 +184,19 @@ export function createWorkbenchShellCommands<TActivityId extends string>({
 
   const shellCommands: CommandDefinition<WorkbenchShellCommandContext<TActivityId>>[] = [];
 
+  if (includeFocusModeToggle) {
+    shellCommands.push({
+      id: WORKBENCH_TOGGLE_FOCUS_MODE_COMMAND_ID,
+      icon: 'codicon-screen-full',
+      isEnabled: ({ toggleFocusMode }) => toggleFocusMode !== undefined,
+      label: ({ isFocusModeActive }) =>
+        isFocusModeActive ? 'Exit Focus Mode' : 'Enter Focus Mode',
+      run: ({ toggleFocusMode }) => toggleFocusMode?.(),
+      shortcut: 'Ctrl/Cmd+Shift+F11',
+      title: 'Toggle Focus Mode',
+    });
+  }
+
   if (includeSidebarToggle) {
     shellCommands.push({
       id: WORKBENCH_TOGGLE_PRIMARY_SIDEBAR_COMMAND_ID,
@@ -207,6 +225,7 @@ export function createWorkbenchShellCommands<TActivityId extends string>({
 
 export function createWorkbenchShellMenuEntries<TActivityId extends string>({
   activities,
+  includeFocusModeToggle = true,
   includeSettings = true,
   includeSidebarToggle = true,
   menuSeparatorId = 'workbench-shell-separator',
@@ -223,6 +242,15 @@ export function createWorkbenchShellMenuEntries<TActivityId extends string>({
   );
   const shellEntries: CommandMenuEntry<WorkbenchShellCommandContext<TActivityId>>[] = [];
 
+  if (includeFocusModeToggle) {
+    shellEntries.push(
+      commandMenuEntry<WorkbenchShellCommandContext<TActivityId>>(
+        WORKBENCH_TOGGLE_FOCUS_MODE_COMMAND_ID,
+        { surfaces: [WORKBENCH_COMMAND_SURFACE_ACTIVITY_BAR] },
+      ),
+    );
+  }
+
   if (includeSidebarToggle) {
     shellEntries.push(
       commandMenuEntry<WorkbenchShellCommandContext<TActivityId>>(

package/src/workbench/index.ts

@@ -311,6 +311,7 @@ export {
   WORKBENCH_COMMAND_SURFACE_SETTINGS,
   WORKBENCH_COMMAND_SURFACE_WORKSPACE,
   WORKBENCH_OPEN_SETTINGS_COMMAND_ID,
+  WORKBENCH_TOGGLE_FOCUS_MODE_COMMAND_ID,
   WORKBENCH_SEARCH_COPY_RESULT_PATH_COMMAND_ID,
   WORKBENCH_SEARCH_DELETE_RESULT_COMMAND_ID,
   WORKBENCH_SEARCH_OPEN_RESULT_COMMAND_ID,

package/src/workbench/management/WorkbenchNotice.tsx

@@ -9,7 +9,6 @@ import {
   type ReactNode,
 } from 'react';
 import { IconButton, WorkbenchBanner, WorkbenchBannerMessage } from '../../primitives/index';
-import { cx } from '../../utils/cx';
 
 export type WorkbenchNoticeTone = 'error' | 'info' | 'success' | 'warning';
 export type WorkbenchNoticePosition = 'bottom-center' | 'bottom-right';
@@ -150,16 +149,16 @@ export function WorkbenchNoticeViewport({
 
   return (
     <div
-      aria-live="polite"
-      className={resolveNoticeViewportClassName(position)}
+      className="ui-workbench-notice-viewport"
       data-position={position}
+      style={resolveNoticeViewportStyle(position)}
       {...(dataAttributes ?? {})}
     >
       {visibleNotices.map((notice) => (
         <WorkbenchBanner
-          className="pointer-events-auto"
           data-tone={notice.tone}
           key={notice.id}
+          role={notice.tone === 'error' ? 'alert' : 'status'}
           style={resolveNoticeBannerStyle(notice.tone)}
           tone={notice.tone === 'warning' ? 'warning' : 'default'}
           {...(notice.dataAttributes ?? {})}
@@ -187,13 +186,6 @@ export function useWorkbenchNotice(): WorkbenchNoticeController {
   return controller;
 }
 
-function resolveNoticeViewportClassName(position: WorkbenchNoticePosition): string {
-  return cx(
-    'pointer-events-none fixed inset-x-0 bottom-4 z-50 flex flex-col gap-2 px-4',
-    position === 'bottom-center' ? 'items-center' : 'items-end',
-  );
-}
-
 function resolveNoticeBannerStyle(tone: WorkbenchNoticeTone): CSSProperties {
   return {
     borderColor:
@@ -204,5 +196,21 @@ function resolveNoticeBannerStyle(tone: WorkbenchNoticeTone): CSSProperties {
           : undefined,
     maxWidth: 'min(520px, calc(100vw - 32px))',
     minWidth: 'min(420px, calc(100vw - 32px))',
+    pointerEvents: 'auto',
+  };
+}
+
+function resolveNoticeViewportStyle(position: WorkbenchNoticePosition): CSSProperties {
+  return {
+    alignItems: position === 'bottom-center' ? 'center' : 'flex-end',
+    bottom: 16,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    insetInline: 0,
+    paddingInline: 16,
+    pointerEvents: 'none',
+    position: 'fixed',
+    zIndex: 50,
   };
 }

package/src/workbench/settings/StructuredDataSchemaPanel.tsx

@@ -98,6 +98,24 @@ interface WorkbenchStructuredDataSchemaSectionView {
   value: unknown;
 }
 
+interface SchemaSectionRenderOptions {
+  classNames?: WorkbenchStructuredDataSchemaPanelClassNames | undefined;
+  fieldErrors?: Record<string, ReactNode> | undefined;
+  getFieldErrorId?: ((dataPath: string) => string | undefined) | undefined;
+  labels?: WorkbenchStructuredDataSchemaPanelLabels | undefined;
+  localErrorKeys?: ReadonlySet<string> | undefined;
+  onDataValueChange: (path: string[], value: unknown) => void;
+  onValidateField?: (
+    dataPath: string,
+    definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
+    value: unknown,
+  ) => void;
+  readOnly: boolean;
+}
+
+type SchemaSectionRenderProps = WorkbenchStructuredDataSchemaSectionView &
+  SchemaSectionRenderOptions;
+
 const defaultSchemaPanelClassNames: Required<WorkbenchStructuredDataSchemaPanelClassNames> = {
   checkbox: 'ui-workbench-structured-data-schema-panel__checkbox',
   empty: 'ui-workbench-structured-data-schema-panel__empty',
@@ -245,20 +263,7 @@ function renderSchemaFormSection({
   schema,
   section,
   value,
-}: WorkbenchStructuredDataSchemaSectionView & {
-  classNames?: WorkbenchStructuredDataSchemaPanelClassNames | undefined;
-  fieldErrors?: Record<string, ReactNode> | undefined;
-  getFieldErrorId?: ((dataPath: string) => string | undefined) | undefined;
-  labels?: WorkbenchStructuredDataSchemaPanelLabels | undefined;
-  localErrorKeys?: ReadonlySet<string> | undefined;
-  onDataValueChange: (path: string[], value: unknown) => void;
-  onValidateField?: (
-    dataPath: string,
-    definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
-    value: unknown,
-  ) => void;
-  readOnly: boolean;
-}) {
+}: SchemaSectionRenderProps) {
   const fields = section.fields ?? [];
   if (fields.length) {
     return (
@@ -379,20 +384,8 @@ function renderSchemaTableSection({
   section,
   value,
   ...sectionView
-}: WorkbenchStructuredDataSchemaSectionView & {
-  classNames?: WorkbenchStructuredDataSchemaPanelClassNames | undefined;
-  fieldErrors?: Record<string, ReactNode> | undefined;
-  getFieldErrorId?: ((dataPath: string) => string | undefined) | undefined;
-  labels?: WorkbenchStructuredDataSchemaPanelLabels | undefined;
-  localErrorKeys?: ReadonlySet<string> | undefined;
-  onDataValueChange: (path: string[], value: unknown) => void;
-  onValidateField?: (
-    dataPath: string,
-    definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
-    value: unknown,
-  ) => void;
+}: SchemaSectionRenderProps & {
   preferredTableColumns?: readonly string[] | undefined;
-  readOnly: boolean;
 }) {
   const rows = getWorkbenchStructuredDataSchemaTableRows(value);
   const columns = getWorkbenchStructuredDataSchemaDocumentTableColumns({
@@ -569,22 +562,10 @@ function renderSchemaPanelSection({
   preferredTableColumns,
   readOnly,
   sectionView,
-}: {
+}: SchemaSectionRenderOptions & {
   anchorId?: string | undefined;
-  classNames?: WorkbenchStructuredDataSchemaPanelClassNames | undefined;
-  fieldErrors?: Record<string, ReactNode> | undefined;
-  getFieldErrorId?: ((dataPath: string) => string | undefined) | undefined;
   headerActions?: ReactNode | undefined;
-  labels?: WorkbenchStructuredDataSchemaPanelLabels | undefined;
-  localErrorKeys?: ReadonlySet<string> | undefined;
-  onDataValueChange: (path: string[], value: unknown) => void;
-  onValidateField?: (
-    dataPath: string,
-    definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
-    value: unknown,
-  ) => void;
   preferredTableColumns?: readonly string[] | undefined;
-  readOnly: boolean;
   sectionView: WorkbenchStructuredDataSchemaSectionView;
 }) {
   const { section, value } = sectionView;

package/src/workbench/settings/sectionedPanelScrollSpy.ts

@@ -30,12 +30,6 @@ export const WORKBENCH_SECTIONED_PANEL_INTERSECTION_THRESHOLDS = [0, 0.25, 0.5,
 
 export type WorkbenchSectionedPanelScrollSpyAxis = 'vertical' | 'horizontal';
 
-export interface WorkbenchSectionedPanelIntersectionEntry {
-  intersectionRatio: number;
-  isIntersecting: boolean;
-  target: { id: string };
-}
-
 export interface WorkbenchSectionedPanelScrollPosition {
   anchorId: string;
   /** Section start along the active scroll axis (top or left). */
@@ -108,70 +102,6 @@ export function isWorkbenchSectionedPanelAtScrollEnd({
   return scrollPosition + clientSize >= scrollSize - bottomThreshold;
 }
 
-/** @deprecated Use `isWorkbenchSectionedPanelAtScrollStart`. */
-export function isWorkbenchSectionedPanelAtScrollTop({
-  scrollTop,
-  topThreshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
-}: {
-  scrollTop: number;
-  topThreshold?: number | undefined;
-}): boolean {
-  return isWorkbenchSectionedPanelAtScrollStart({
-    scrollPosition: scrollTop,
-    startThreshold: topThreshold,
-  });
-}
-
-/** @deprecated Use `isWorkbenchSectionedPanelAtScrollEnd`. */
-export function isWorkbenchSectionedPanelAtScrollBottom({
-  bottomThreshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
-  clientHeight,
-  scrollHeight,
-  scrollTop,
-}: {
-  bottomThreshold?: number | undefined;
-  clientHeight: number;
-  scrollHeight: number;
-  scrollTop: number;
-}): boolean {
-  return isWorkbenchSectionedPanelAtScrollEnd({
-    bottomThreshold,
-    clientSize: clientHeight,
-    scrollPosition: scrollTop,
-    scrollSize: scrollHeight,
-  });
-}
-
-export function resolveWorkbenchSectionedPanelActiveAnchorFromIntersection({
-  anchorOrder,
-  entries,
-  fallbackAnchorId,
-}: {
-  anchorOrder: readonly string[];
-  entries: readonly WorkbenchSectionedPanelIntersectionEntry[];
-  fallbackAnchorId?: string | undefined;
-}): string | undefined {
-  const intersectingAnchorIds = new Set(
-    entries
-      .filter((entry) => entry.isIntersecting && entry.target.id)
-      .map((entry) => entry.target.id),
-  );
-
-  if (intersectingAnchorIds.size === 0) {
-    return fallbackAnchorId;
-  }
-
-  let nextActive = fallbackAnchorId;
-
-  for (const anchorId of anchorOrder) {
-    if (intersectingAnchorIds.has(anchorId)) {
-      nextActive = anchorId;
-    }
-  }
-
-  return nextActive ?? fallbackAnchorId;
-}
-
 export function resolveWorkbenchSectionedPanelActiveAnchorFromScroll({
   activeLineBias = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_ACTIVE_LINE_BIAS,
   anchorOrder,
@@ -250,17 +180,6 @@ export function resolveWorkbenchSectionedPanelScrollTarget({
   return Math.max(0, sectionStart - offset);
 }
 
-/** @deprecated Use `resolveWorkbenchSectionedPanelScrollTarget`. */
-export function resolveWorkbenchSectionedPanelScrollTop({
-  offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
-  sectionTop,
-}: {
-  offset?: number | undefined;
-  sectionTop: number;
-}): number {
-  return resolveWorkbenchSectionedPanelScrollTarget({ offset, sectionStart: sectionTop });
-}
-
 export function createWorkbenchSectionedPanelIntersectionRootMargin(
   offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
   axis: WorkbenchSectionedPanelScrollSpyAxis = 'vertical',

package/src/workbench/shell/workbenchSidebarLayoutContext.ts

@@ -38,9 +38,3 @@ export function toWorkbenchSidebarLayoutContextValue<TViewId extends string>(
 ): WorkbenchSidebarLayoutContextStore {
   return value as unknown as WorkbenchSidebarLayoutContextStore;
 }
-
-export function fromWorkbenchSidebarLayoutContextValue<TViewId extends string>(
-  value: WorkbenchSidebarLayoutContextStore,
-): WorkbenchSidebarLayoutContextValue<TViewId> {
-  return value as unknown as WorkbenchSidebarLayoutContextValue<TViewId>;
-}

package/src/workbench/views/command-list-density.css

@@ -0,0 +1,36 @@
+/* Compact density overrides for Workbench command lists. Keep before command-list.css. */
+
+.ui-workbench-command-list {
+  padding: 0;
+}
+
+.ui-workbench-command-item,
+.ui-workbench-command-item.ui-button {
+  --ui-button-height: auto;
+  --ui-button-padding: 7px 10px;
+  --ui-button-border-radius: 0;
+  border-radius: 0;
+  height: auto;
+  padding: 7px 10px;
+}
+
+.ui-workbench-command-group-shell__nav {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__nav-link {
+  border-radius: 0;
+}
+
+.ui-workbench-command-group-shell__content {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__section {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__section-header {
+  min-height: 28px;
+  padding: 4px 10px;
+}

package/src/workbench/views/command-list.css

@@ -1,3 +1,5 @@
+@import './command-list-density.css';
+
 .ui-workbench-command-list {
   max-height: min(430px, calc(100vh - 190px));
   overflow: auto;

package/src/workbench/workspace/WorkspaceExplorer.tsx

@@ -30,7 +30,7 @@ import {
 import { WorkspaceFileIcon } from './WorkspaceFileIcon';
 import type { WorkspaceTreeNode } from './types';
 
-export const WORKSPACE_EXPLORER_DRAG_DATA_TYPE = 'application/x-newchobo-ui-workspace-paths';
+export const WORKSPACE_EXPLORER_DRAG_DATA_TYPE = 'application/x-workbench-kit-workspace-paths';
 export const WORKSPACE_EXPLORER_DRAG_METADATA_DATA_TYPE = `${WORKSPACE_EXPLORER_DRAG_DATA_TYPE}.metadata`;
 
 export type WorkspaceExplorerSelectionChangeReason =

package/src/workbench/workspace/createVirtualWorkspaceExplorerPort.ts

@@ -6,10 +6,7 @@ import {
 } from '@workbench-kit/workspace';
 
 import type { VirtualWorkspaceApi } from './useVirtualWorkspace';
-import type {
-  WorkspaceExplorerControllerPort,
-  WorkspaceExplorerMutationResult,
-} from './workspaceExplorerController';
+import type { WorkspaceExplorerControllerPort } from './workspaceExplorerController';
 
 export function createVirtualWorkspaceExplorerPort({
   onNotify,
@@ -129,13 +126,3 @@ export function applyVirtualWorkspaceRenameSelection(
     paths: selection.paths.map(renameDescendantPath),
   };
 }
-
-export function toWorkspaceExplorerMutationResult(
-  value: WorkspaceExplorerMutationResult | void | undefined,
-): WorkspaceExplorerMutationResult | undefined {
-  if (!value) {
-    return undefined;
-  }
-
-  return value;
-}

package/src/workbench-menu-surfaces.css

@@ -1,57 +1,3 @@
-/* Optional compact menu density for context menus and command lists. */
-
-.ui-context-menu__item,
-.ui-context-menu__item.ui-button {
-  --ui-button-min-height: 28px;
-  --ui-button-height: auto;
-  --ui-button-padding: 4px 10px;
-  --ui-button-border-radius: 0;
-  border-radius: 0;
-  min-height: 28px;
-  height: auto;
-  padding: 4px 10px;
-}
-
-.ui-context-menu__separator {
-  margin: 0;
-}
-
-.ui-context-menu__shortcut {
-  font-size: var(--font-size-xs);
-  color: var(--color-text-subtle);
-}
-
-.ui-workbench-command-list {
-  padding: 0;
-}
-
-.ui-workbench-command-item,
-.ui-workbench-command-item.ui-button {
-  --ui-button-height: auto;
-  --ui-button-padding: 7px 10px;
-  --ui-button-border-radius: 0;
-  border-radius: 0;
-  height: auto;
-  padding: 7px 10px;
-}
-
-.ui-workbench-command-group-shell__nav {
-  padding: 0;
-}
-
-.ui-workbench-command-group-shell__nav-link {
-  border-radius: 0;
-}
-
-.ui-workbench-command-group-shell__content {
-  padding: 0;
-}
-
-.ui-workbench-command-group-shell__section {
-  padding: 0;
-}
-
-.ui-workbench-command-group-shell__section-header {
-  min-height: 28px;
-  padding: 4px 10px;
-}
+/* Compatibility entry for consumers that opt into both compact menu surfaces. */
+@import './overlay/context-menu-density.css';
+@import './workbench/views/command-list-density.css';

package/src/brand/TilepaperAppIcon.tsx

@@ -1,181 +0,0 @@
-import { useId, type SVGProps } from 'react';
-import { cx } from '../utils/cx';
-import {
-  TILEPAPER_ICON_CANVAS,
-  TILEPAPER_ICON_GRADIENTS,
-  TILEPAPER_ICON_GRID,
-  TILEPAPER_ICON_ROOT_ELEVATION,
-  TILEPAPER_ICON_ROOT_PANEL,
-  TILEPAPER_ICON_TILES,
-  tilepaperPaperFoldPaths,
-} from './tilepaper-app-icon-geometry.js';
-
-export type TilepaperAppIconProps = Omit<SVGProps<SVGSVGElement>, 'viewBox'> & {
-  /** Flat rendering for small surfaces (e.g. titlebar) where elevation blur reads muddy. */
-  compact?: boolean;
-};
-
-export function TilepaperAppIcon({ className, compact = false, ...props }: TilepaperAppIconProps) {
-  const idPrefix = `tilepaper-icon-${useId().replace(/:/g, '')}`;
-  const bgId = `${idPrefix}-bg`;
-  const panelId = `${idPrefix}-panel`;
-  const elevationId = `${idPrefix}-elevation`;
-  const blueId = `${idPrefix}-blue`;
-  const paperId = `${idPrefix}-paper`;
-  const tealId = `${idPrefix}-teal`;
-  const violetId = `${idPrefix}-violet`;
-  const { tileRx, tileSize } = TILEPAPER_ICON_GRID;
-  const fold = tilepaperPaperFoldPaths(
-    TILEPAPER_ICON_TILES.paper.x,
-    TILEPAPER_ICON_TILES.paper.y,
-    tileSize,
-  );
-
-  return (
-    <svg
-      aria-hidden="true"
-      className={cx('tilepaper-app-icon', className)}
-      fill="none"
-      viewBox={`0 0 ${TILEPAPER_ICON_CANVAS.size} ${TILEPAPER_ICON_CANVAS.size}`}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <defs>
-        {compact ? null : (
-          <filter
-            id={elevationId}
-            x="-12%"
-            y="-8%"
-            width="124%"
-            height="128%"
-            colorInterpolationFilters="sRGB"
-          >
-            <feDropShadow
-              dx="0"
-              dy={TILEPAPER_ICON_ROOT_ELEVATION.dy}
-              floodColor={TILEPAPER_ICON_ROOT_ELEVATION.floodColor}
-              floodOpacity={TILEPAPER_ICON_ROOT_ELEVATION.floodOpacity}
-              stdDeviation={TILEPAPER_ICON_ROOT_ELEVATION.stdDeviation}
-            />
-          </filter>
-        )}
-        <linearGradient
-          id={bgId}
-          x1={TILEPAPER_ICON_GRADIENTS.bg.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.bg.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.bg.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.bg.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#0A1020" />
-          <stop offset="1" stopColor="#121C33" />
-        </linearGradient>
-        <linearGradient
-          id={panelId}
-          x1={TILEPAPER_ICON_GRADIENTS.panel.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.panel.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.panel.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.panel.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#1A2C4D" />
-          <stop offset="0.42" stopColor="#162844" />
-          <stop offset="1" stopColor="#111D35" />
-        </linearGradient>
-        <linearGradient
-          id={blueId}
-          x1={TILEPAPER_ICON_GRADIENTS.blue.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.blue.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.blue.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.blue.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#5D88FF" />
-          <stop offset="1" stopColor="#3158D6" />
-        </linearGradient>
-        <linearGradient
-          id={paperId}
-          x1={TILEPAPER_ICON_GRADIENTS.paper.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.paper.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.paper.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.paper.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#FFF9EE" />
-          <stop offset="1" stopColor="#DDD9D1" />
-        </linearGradient>
-        <linearGradient
-          id={tealId}
-          x1={TILEPAPER_ICON_GRADIENTS.teal.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.teal.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.teal.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.teal.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#2FD6C1" />
-          <stop offset="1" stopColor="#149685" />
-        </linearGradient>
-        <linearGradient
-          id={violetId}
-          x1={TILEPAPER_ICON_GRADIENTS.violet.x1}
-          x2={TILEPAPER_ICON_GRADIENTS.violet.x2}
-          y1={TILEPAPER_ICON_GRADIENTS.violet.y1}
-          y2={TILEPAPER_ICON_GRADIENTS.violet.y2}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0" stopColor="#8A67FF" />
-          <stop offset="1" stopColor="#5D3AC8" />
-        </linearGradient>
-      </defs>
-      <rect
-        width={TILEPAPER_ICON_CANVAS.size}
-        height={TILEPAPER_ICON_CANVAS.size}
-        rx={TILEPAPER_ICON_CANVAS.rx}
-        fill={`url(#${bgId})`}
-      />
-      <rect
-        filter={compact ? undefined : `url(#${elevationId})`}
-        fill={`url(#${panelId})`}
-        height={TILEPAPER_ICON_ROOT_PANEL.size}
-        rx={TILEPAPER_ICON_ROOT_PANEL.rx}
-        width={TILEPAPER_ICON_ROOT_PANEL.size}
-        x={TILEPAPER_ICON_ROOT_PANEL.x}
-        y={TILEPAPER_ICON_ROOT_PANEL.y}
-      />
-      <rect
-        x={TILEPAPER_ICON_TILES.blue.x}
-        y={TILEPAPER_ICON_TILES.blue.y}
-        width={tileSize}
-        height={tileSize}
-        rx={tileRx}
-        fill={`url(#${blueId})`}
-      />
-      <rect
-        x={TILEPAPER_ICON_TILES.teal.x}
-        y={TILEPAPER_ICON_TILES.teal.y}
-        width={tileSize}
-        height={tileSize}
-        rx={tileRx}
-        fill={`url(#${tealId})`}
-      />
-      <rect
-        x={TILEPAPER_ICON_TILES.violet.x}
-        y={TILEPAPER_ICON_TILES.violet.y}
-        width={tileSize}
-        height={tileSize}
-        rx={tileRx}
-        fill={`url(#${violetId})`}
-      />
-      <rect
-        x={TILEPAPER_ICON_TILES.paper.x}
-        y={TILEPAPER_ICON_TILES.paper.y}
-        width={tileSize}
-        height={tileSize}
-        rx={tileRx}
-        fill={`url(#${paperId})`}
-      />
-      <path d={fold.highlight} fill="white" fillOpacity="0.92" />
-      <path d={fold.shadow} fill="#C9C3B7" fillOpacity="0.74" />
-    </svg>
-  );
-}

package/src/brand/index.ts

@@ -1,2 +0,0 @@
-export { TilepaperAppIcon } from './TilepaperAppIcon';
-export type { TilepaperAppIconProps } from './TilepaperAppIcon';