@puredesktop/create-app 2.1.9 → 2.1.10

package/template/scripts/validate-puredesktop-app.mjs

@@ -20,10 +20,10 @@ if (packageJson) {
   validatePackageJson(packageJson)
 }
 
-if (manifest) {
-  validateManifest(manifest)
-  await validateBridgePermissionUsage(manifest)
-}
+if (manifest) {
+  validateManifest(manifest)
+  await validateBridgePermissionUsage(manifest)
+}
 
 if (await isDirectory(distPath)) {
   info.push('dist folder is present for static registration.')
@@ -136,7 +136,7 @@ function validateManifest(manifest) {
   if (errors.length === 0) info.push('plugin.json is valid.')
 }
 
-function validateEntrypoint(entrypoint, permissions) {
+function validateEntrypoint(entrypoint, permissions) {
   if (!isPlainObject(entrypoint)) {
     errors.push('entrypoint is required.')
     return
@@ -170,47 +170,47 @@ function validateEntrypoint(entrypoint, permissions) {
     }
     return
   }
-  errors.push(`Unsupported entrypoint kind: ${String(entrypoint.kind ?? '') || '(missing)'}.`)
-}
-
-async function validateBridgePermissionUsage(manifest) {
-  const permissions = Array.isArray(manifest.permissions) ? manifest.permissions : []
-  const sourceText = await readProjectText(join(ROOT, 'src'))
-  const requirements = [
-    {
-      permission: 'filesystem',
-      hints: [
-        '/bridge/storage',
-        '/bridge/fs',
-        '/bridge/dialog',
-        '/bridge/react/usePlatformJsonStore',
-      ],
-    },
-    {
-      permission: 'settings',
-      hints: [
-        '/bridge/appSettings',
-        '/bridge/preferences',
-        '/bridge/react/usePlatformAppSettings',
-        '/bridge/react/usePlatformPreferences',
-      ],
-    },
-    {
-      permission: 'network',
-      hints: ['/bridge/network', '/bridge/vision'],
-    },
-  ]
-
-  for (const requirement of requirements) {
-    if (permissions.includes(requirement.permission)) continue
-    if (!requirement.hints.some(hint => sourceText.includes(hint))) continue
-    errors.push(
-      `Source imports ${requirement.permission}-gated bridge helpers, so plugin.json must include the ${requirement.permission} permission.`,
-    )
-  }
-}
-
-async function validateAgentTools(manifest, distPath) {
+  errors.push(`Unsupported entrypoint kind: ${String(entrypoint.kind ?? '') || '(missing)'}.`)
+}
+
+async function validateBridgePermissionUsage(manifest) {
+  const permissions = Array.isArray(manifest.permissions) ? manifest.permissions : []
+  const sourceText = await readProjectText(join(ROOT, 'src'))
+  const requirements = [
+    {
+      permission: 'filesystem',
+      hints: [
+        '/bridge/storage',
+        '/bridge/fs',
+        '/bridge/dialog',
+        '/bridge/react/usePlatformJsonStore',
+      ],
+    },
+    {
+      permission: 'settings',
+      hints: [
+        '/bridge/appSettings',
+        '/bridge/preferences',
+        '/bridge/react/usePlatformAppSettings',
+        '/bridge/react/usePlatformPreferences',
+      ],
+    },
+    {
+      permission: 'network',
+      hints: ['/bridge/network', '/bridge/vision'],
+    },
+  ]
+
+  for (const requirement of requirements) {
+    if (permissions.includes(requirement.permission)) continue
+    if (!requirement.hints.some(hint => sourceText.includes(hint))) continue
+    errors.push(
+      `Source imports ${requirement.permission}-gated bridge helpers, so plugin.json must include the ${requirement.permission} permission.`,
+    )
+  }
+}
+
+async function validateAgentTools(manifest, distPath) {
   const tools = manifest.app?.agents?.tools ?? []
   if (!Array.isArray(tools) || tools.length === 0) {
     info.push('No app agent tools declared.')

package/template/src/App.tsx

@@ -1,10 +1,10 @@
 import { AppFrame } from '@puredesktop/puredesktop-ui-bridge/components/common/containers/AppFrame'
 import { EmptyState } from '@puredesktop/puredesktop-ui-bridge/components/common/feedback/EmptyState'
 import { usePlatformBridge } from '@puredesktop/puredesktop-ui-bridge/bridge/react/usePlatformBridge'
-import { AppShell } from './components/AppShell'
-import { isStandaloneDevMode } from './bridge/platformBridge'
-import { APP_TITLE } from './constants'
-import { useAppBoot } from './hooks/useAppBoot'
+import { AppShell } from './components/AppShell'
+import { isStandaloneDevMode } from './bridge/platformBridge'
+import { APP_TITLE } from './constants'
+import { useAppBoot } from './hooks/useAppBoot'
 
 export function App(): React.ReactElement {
   const { error: bridgeError, ready } = usePlatformBridge()
@@ -14,7 +14,7 @@ export function App(): React.ReactElement {
 
   if (bridgeError && !standaloneDev) {
     return (
-      <AppFrame>
+      <AppFrame hideWordmark>
         <EmptyState
           tone="error"
           title="Bridge unavailable"
@@ -26,10 +26,10 @@ export function App(): React.ReactElement {
 
   if (!bootReady || !boot) {
     return (
-      <AppFrame>
+      <AppFrame hideWordmark>
         <EmptyState
           tone={bootError ? 'error' : 'neutral'}
-          title={bootError ? 'Boot failed' : APP_TITLE}
+          title={bootError ? 'Boot failed' : APP_TITLE}
           message={
             bootError
               ? bootError.message
@@ -43,7 +43,7 @@ export function App(): React.ReactElement {
   }
 
   return (
-    <AppFrame>
+    <AppFrame hideWordmark>
       <AppShell settings={boot.settings} />
     </AppFrame>
   )

package/template/src/components/AppShell.tsx

@@ -1,11 +1,11 @@
-import type { AppSettings } from '../types'
-import { APP_TITLE } from '../constants'
-import { StarterWorkspace } from './StarterWorkspace'
-
-export interface AppShellProps {
-  settings: AppSettings
-}
-
-export function AppShell({ settings }: AppShellProps): React.ReactElement {
-  return <StarterWorkspace appName={APP_TITLE} settings={settings} />
-}
+import type { AppSettings } from '../types'
+import { APP_TITLE } from '../constants'
+import { StarterWorkspace } from './StarterWorkspace'
+
+export interface AppShellProps {
+  settings: AppSettings
+}
+
+export function AppShell({ settings }: AppShellProps): React.ReactElement {
+  return <StarterWorkspace appName={APP_TITLE} settings={settings} />
+}

package/template/src/components/StarterWorkspace.tsx

@@ -1,154 +1,154 @@
-import styled from 'styled-components'
-import { Heading } from '@puredesktop/puredesktop-ui-bridge/components/common/typography/Heading'
-import { Text } from '@puredesktop/puredesktop-ui-bridge/components/common/typography/Text'
-import {
-  readConfiguredSettingCount,
-  starterMilestones,
-} from '../lib/starterWorkspace'
-import type { AppSettings } from '../types'
-
-const Root = styled.div`
-  display: flex;
-  min-height: 100%;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  padding: var(--platform-spacing-xxl);
-  color: var(--platform-colors-text);
-  background:
-    linear-gradient(
-      135deg,
-      color-mix(in srgb, var(--platform-colors-accent) 6%, transparent),
-      transparent 42%
-    ),
-    var(--platform-colors-bg);
-`
-
-const Panel = styled.section`
-  display: grid;
-  width: min(760px, 100%);
-  gap: var(--platform-spacing-xl);
-`
-
-const Header = styled.header`
-  display: grid;
-  gap: var(--platform-spacing-sm);
-`
-
-const MilestoneGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--platform-spacing-md);
-
-  @media (max-width: 720px) {
-    grid-template-columns: 1fr;
-  }
-`
-
-const Milestone = styled.article`
-  display: grid;
-  gap: var(--platform-spacing-sm);
-  min-width: 0;
-  padding: var(--platform-spacing-lg);
-  border: 1px solid var(--platform-colors-border);
-  background: var(--platform-colors-surface);
-  box-shadow: var(--platform-shadow-sm);
-`
-
-const PulseTrack = styled.div`
-  position: relative;
-  overflow: hidden;
-  height: 3px;
-  background: var(--platform-colors-border);
-`
-
-const Pulse = styled.div`
-  position: absolute;
-  inset: 0 auto 0 0;
-  width: 44%;
-  background: var(--platform-colors-accent);
-  animation: starter-pulse 1600ms ease-in-out infinite;
-
-  @keyframes starter-pulse {
-    0% {
-      transform: translateX(-100%);
-      opacity: 0.35;
-    }
-
-    45%,
-    60% {
-      opacity: 1;
-    }
-
-    100% {
-      transform: translateX(230%);
-      opacity: 0.35;
-    }
-  }
-`
-
-const MetaRow = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--platform-spacing-sm);
-`
-
-const MetaPill = styled.span`
-  padding: 4px 8px;
-  border: 1px solid var(--platform-colors-border);
-  background: var(--platform-colors-surface);
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-xs);
-  font-weight: var(--platform-typography-font-weight-medium);
-`
-
-interface StarterWorkspaceProps {
-  appName: string
-  settings: AppSettings
-}
-
-export function StarterWorkspace({
-  appName,
-  settings,
-}: StarterWorkspaceProps): React.ReactElement {
-  const settingCount = readConfiguredSettingCount(settings)
-
-  return (
-    <Root>
-      <Panel aria-label={`${appName} starter workspace`}>
-        <Header>
-          <Text size="sm" tone="secondary">
-            PureDesktop app workspace
-          </Text>
-          <Heading level={1}>{appName}</Heading>
-          <Text tone="secondary">
-            This workspace is ready. The first build step will replace this
-            starter screen with the product experience.
-          </Text>
-        </Header>
-
-        <MilestoneGrid>
-          {starterMilestones.map(milestone => (
-            <Milestone key={milestone.id}>
-              <Text size="sm" weight="medium">
-                {milestone.title}
-              </Text>
-              <Text size="sm" tone="secondary">
-                {milestone.detail}
-              </Text>
-              <PulseTrack aria-hidden="true">
-                <Pulse />
-              </PulseTrack>
-            </Milestone>
-          ))}
-        </MilestoneGrid>
-
-        <MetaRow>
-          <MetaPill>{settingCount} setting key(s)</MetaPill>
-          <MetaPill>Theme active</MetaPill>
-          <MetaPill>Shell connected</MetaPill>
-        </MetaRow>
-      </Panel>
-    </Root>
-  )
-}
+import styled from 'styled-components'
+import { Heading } from '@puredesktop/puredesktop-ui-bridge/components/common/typography/Heading'
+import { Text } from '@puredesktop/puredesktop-ui-bridge/components/common/typography/Text'
+import {
+  readConfiguredSettingCount,
+  starterMilestones,
+} from '../lib/starterWorkspace'
+import type { AppSettings } from '../types'
+
+const Root = styled.div`
+  display: flex;
+  min-height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: var(--platform-spacing-xxl);
+  color: var(--platform-colors-text);
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--platform-colors-accent) 6%, transparent),
+      transparent 42%
+    ),
+    var(--platform-colors-bg);
+`
+
+const Panel = styled.section`
+  display: grid;
+  width: min(760px, 100%);
+  gap: var(--platform-spacing-xl);
+`
+
+const Header = styled.header`
+  display: grid;
+  gap: var(--platform-spacing-sm);
+`
+
+const MilestoneGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--platform-spacing-md);
+
+  @media (max-width: 720px) {
+    grid-template-columns: 1fr;
+  }
+`
+
+const Milestone = styled.article`
+  display: grid;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+  padding: var(--platform-spacing-lg);
+  border: 1px solid var(--platform-colors-border);
+  background: var(--platform-colors-surface);
+  box-shadow: var(--platform-shadow-sm);
+`
+
+const PulseTrack = styled.div`
+  position: relative;
+  overflow: hidden;
+  height: 3px;
+  background: var(--platform-colors-border);
+`
+
+const Pulse = styled.div`
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 44%;
+  background: var(--platform-colors-accent);
+  animation: starter-pulse 1600ms ease-in-out infinite;
+
+  @keyframes starter-pulse {
+    0% {
+      transform: translateX(-100%);
+      opacity: 0.35;
+    }
+
+    45%,
+    60% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: translateX(230%);
+      opacity: 0.35;
+    }
+  }
+`
+
+const MetaRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-sm);
+`
+
+const MetaPill = styled.span`
+  padding: 4px 8px;
+  border: 1px solid var(--platform-colors-border);
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: var(--platform-typography-font-weight-medium);
+`
+
+interface StarterWorkspaceProps {
+  appName: string
+  settings: AppSettings
+}
+
+export function StarterWorkspace({
+  appName,
+  settings,
+}: StarterWorkspaceProps): React.ReactElement {
+  const settingCount = readConfiguredSettingCount(settings)
+
+  return (
+    <Root>
+      <Panel aria-label={`${appName} starter workspace`}>
+        <Header>
+          <Text size="sm" tone="secondary">
+            PureDesktop app workspace
+          </Text>
+          <Heading level={1}>{appName}</Heading>
+          <Text tone="secondary">
+            This workspace is ready. The first build step will replace this
+            starter screen with the product experience.
+          </Text>
+        </Header>
+
+        <MilestoneGrid>
+          {starterMilestones.map(milestone => (
+            <Milestone key={milestone.id}>
+              <Text size="sm" weight="medium">
+                {milestone.title}
+              </Text>
+              <Text size="sm" tone="secondary">
+                {milestone.detail}
+              </Text>
+              <PulseTrack aria-hidden="true">
+                <Pulse />
+              </PulseTrack>
+            </Milestone>
+          ))}
+        </MilestoneGrid>
+
+        <MetaRow>
+          <MetaPill>{settingCount} setting key(s)</MetaPill>
+          <MetaPill>Theme active</MetaPill>
+          <MetaPill>Shell connected</MetaPill>
+        </MetaRow>
+      </Panel>
+    </Root>
+  )
+}

package/template/src/constants.ts

@@ -1,2 +1,2 @@
-export const APP_SLUG = '{{APP_SLUG}}'
-export const APP_TITLE = '{{APP_TITLE}}'
+export const APP_SLUG = '{{APP_SLUG}}'
+export const APP_TITLE = '{{APP_TITLE}}'

package/template/src/lib/starterWorkspace.ts

@@ -1,29 +1,29 @@
-import type { AppSettings } from '../types'
-
-export interface StarterMilestone {
-  detail: string
-  id: string
-  title: string
-}
-
-export const starterMilestones: StarterMilestone[] = [
-  {
-    detail: 'The starter screen is temporary and ready to be replaced by product UI.',
-    id: 'boot',
-    title: 'Workspace ready',
-  },
-  {
-    detail: 'PureDesktop styling is loaded so early screens match the shell.',
-    id: 'composition',
-    title: 'Theme active',
-  },
-  {
-    detail: 'Settings and shell capabilities are available through the app bridge.',
-    id: 'domain',
-    title: 'Shell connected',
-  },
-]
-
-export function readConfiguredSettingCount(settings: AppSettings): number {
-  return Object.keys(settings).length
-}
+import type { AppSettings } from '../types'
+
+export interface StarterMilestone {
+  detail: string
+  id: string
+  title: string
+}
+
+export const starterMilestones: StarterMilestone[] = [
+  {
+    detail: 'The starter screen is temporary and ready to be replaced by product UI.',
+    id: 'boot',
+    title: 'Workspace ready',
+  },
+  {
+    detail: 'PureDesktop styling is loaded so early screens match the shell.',
+    id: 'composition',
+    title: 'Theme active',
+  },
+  {
+    detail: 'Settings and shell capabilities are available through the app bridge.',
+    id: 'domain',
+    title: 'Shell connected',
+  },
+]
+
+export function readConfiguredSettingCount(settings: AppSettings): number {
+  return Object.keys(settings).length
+}

package/template/vite.config.js

@@ -16,16 +16,16 @@ function devServerFromManifest(metaUrl) {
   }
 }
 
-export default defineConfig({
-  plugins: [
-    react({
-      plugins: [
-        ['@swc/plugin-styled-components', { displayName: true, fileName: true }],
-      ],
-    }),
-  ],
-  optimizeDeps: {
-    include: ['react-dom'],
-  },
-  server: devServerFromManifest(import.meta.url),
-})
+export default defineConfig({
+  plugins: [
+    react({
+      plugins: [
+        ['@swc/plugin-styled-components', { displayName: true, fileName: true }],
+      ],
+    }),
+  ],
+  optimizeDeps: {
+    include: ['react-dom'],
+  },
+  server: devServerFromManifest(import.meta.url),
+})