@amaster.ai/pi-lark 0.1.2-beta.44 → 0.1.2-beta.45

package/skills/lark-apps/creative-design/starter-components/ios-frame.jsx

@@ -0,0 +1,270 @@
+/* BEGIN USAGE */
+// iOS.jsx — Simplified iOS 26 (Liquid Glass) device frame
+// Based on the iOS 26 UI Kit + Figma status bar spec. No assets, no deps.
+// Exports (to window): IOSDevice, IOSStatusBar, IOSList, IOSListRow, IOSKeyboard
+//
+// Usage — wrap your screen content in <IOSDevice> to get the bezel, status bar
+// and home indicator (props: width=402, height=874, dark, keyboard):
+//
+//   <IOSDevice>
+//     ...your screen content...
+//   </IOSDevice>
+//   <IOSDevice dark keyboard>…</IOSDevice>
+//   <IOSDevice width={390} height={844}>…</IOSDevice>   // smaller device size
+//
+// Safe areas — REQUIRED on every screen. The status bar (top) and home
+// indicator (bottom) float OVER your content; inset it or it overlaps them.
+//   --ios-safe-top     top inset (Dynamic Island + status bar)
+//   --ios-safe-bottom  bottom inset (home indicator)
+/* END USAGE */
+
+// ─────────────────────────────────────────────────────────────
+// Status bar
+// ─────────────────────────────────────────────────────────────
+function IOSStatusBar({ dark = false, time = '9:41' }) {
+  const c = dark ? '#fff' : '#000';
+  return (
+    <div style={{
+      display: 'flex', gap: 154, alignItems: 'center', justifyContent: 'center',
+      padding: '21px 24px 19px', boxSizing: 'border-box',
+      position: 'relative', zIndex: 20, width: '100%',
+    }}>
+      <div style={{ flex: 1, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', paddingTop: 1.5 }}>
+        <span style={{
+          fontFamily: '-apple-system, "SF Pro", system-ui', fontWeight: 590,
+          fontSize: 17, lineHeight: '22px', color: c,
+        }}>{time}</span>
+      </div>
+      <div style={{ flex: 1, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, paddingTop: 1, paddingRight: 1 }}>
+        <svg width="19" height="12" viewBox="0 0 19 12">
+          <rect x="0" y="7.5" width="3.2" height="4.5" rx="0.7" fill={c}/>
+          <rect x="4.8" y="5" width="3.2" height="7" rx="0.7" fill={c}/>
+          <rect x="9.6" y="2.5" width="3.2" height="9.5" rx="0.7" fill={c}/>
+          <rect x="14.4" y="0" width="3.2" height="12" rx="0.7" fill={c}/>
+        </svg>
+        <svg width="17" height="12" viewBox="0 0 17 12">
+          <path d="M8.5 3.2C10.8 3.2 12.9 4.1 14.4 5.6L15.5 4.5C13.7 2.7 11.2 1.5 8.5 1.5C5.8 1.5 3.3 2.7 1.5 4.5L2.6 5.6C4.1 4.1 6.2 3.2 8.5 3.2Z" fill={c}/>
+          <path d="M8.5 6.8C9.9 6.8 11.1 7.3 12 8.2L13.1 7.1C11.8 5.9 10.2 5.1 8.5 5.1C6.8 5.1 5.2 5.9 3.9 7.1L5 8.2C5.9 7.3 7.1 6.8 8.5 6.8Z" fill={c}/>
+          <circle cx="8.5" cy="10.5" r="1.5" fill={c}/>
+        </svg>
+        <svg width="27" height="13" viewBox="0 0 27 13">
+          <rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke={c} strokeOpacity="0.35" fill="none"/>
+          <rect x="2" y="2" width="20" height="9" rx="2" fill={c}/>
+          <path d="M25 4.5V8.5C25.8 8.2 26.5 7.2 26.5 6.5C26.5 5.8 25.8 4.8 25 4.5Z" fill={c} fillOpacity="0.4"/>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Grouped list (inset card, r:26) + row (52px)
+// ─────────────────────────────────────────────────────────────
+function IOSListRow({ title, detail, icon, chevron = true, isLast = false, dark = false }) {
+  const text = dark ? '#fff' : '#000';
+  const sec = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';
+  const ter = dark ? 'rgba(235,235,245,0.3)' : 'rgba(60,60,67,0.3)';
+  const sep = dark ? 'rgba(84,84,88,0.65)' : 'rgba(60,60,67,0.12)';
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', minHeight: 52,
+      padding: '0 16px', position: 'relative',
+      fontFamily: '-apple-system, system-ui', fontSize: 17,
+      letterSpacing: -0.43,
+    }}>
+      {icon && (
+        <div style={{
+          width: 30, height: 30, borderRadius: 7, background: icon,
+          marginRight: 12, flexShrink: 0,
+        }} />
+      )}
+      <div style={{ flex: 1, color: text }}>{title}</div>
+      {detail && <span style={{ color: sec, marginRight: 6 }}>{detail}</span>}
+      {chevron && (
+        <svg width="8" height="14" viewBox="0 0 8 14" style={{ flexShrink: 0 }}>
+          <path d="M1 1l6 6-6 6" stroke={ter} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      )}
+      {!isLast && (
+        <div style={{
+          position: 'absolute', bottom: 0, right: 0,
+          left: icon ? 58 : 16, height: 0.5, background: sep,
+        }} />
+      )}
+    </div>
+  );
+}
+
+function IOSList({ header, children, dark = false }) {
+  const hc = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';
+  const bg = dark ? '#1C1C1E' : '#fff';
+  return (
+    <div>
+      {header && (
+        <div style={{
+          fontFamily: '-apple-system, system-ui', fontSize: 13,
+          color: hc, textTransform: 'uppercase',
+          padding: '8px 36px 6px', letterSpacing: -0.08,
+        }}>{header}</div>
+      )}
+      <div style={{
+        background: bg, borderRadius: 26,
+        margin: '0 16px', overflow: 'hidden',
+      }}>{children}</div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Device frame
+// ─────────────────────────────────────────────────────────────
+function IOSDevice({
+  children, width = 402, height = 874, dark = false,
+  keyboard = false,
+}) {
+  return (
+    <div style={{
+      width, height, borderRadius: 48, overflow: 'hidden',
+      position: 'relative', background: dark ? '#000' : '#F2F2F7',
+      border: '1px solid #DEE0E3',
+      fontFamily: '-apple-system, system-ui, sans-serif',
+      WebkitFontSmoothing: 'antialiased',
+      '--ios-safe-top': '62px',
+      '--ios-safe-bottom': '34px',
+    }}>
+      {/* dynamic island */}
+      <div style={{
+        position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
+        width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50,
+      }} />
+      {/* status bar (absolute) */}
+      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
+        <IOSStatusBar dark={dark} />
+      </div>
+      {/* content */}
+      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <div style={{ flex: 1, overflow: 'auto' }}>{children}</div>
+        {keyboard && <IOSKeyboard dark={dark} />}
+      </div>
+      {/* home indicator — always on top */}
+      <div style={{
+        position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 60,
+        height: 34, display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
+        paddingBottom: 8, pointerEvents: 'none',
+      }}>
+        <div style={{
+          width: 139, height: 5, borderRadius: 100,
+          background: dark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)',
+        }} />
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Keyboard — iOS 26 liquid glass
+// ─────────────────────────────────────────────────────────────
+function IOSKeyboard({ dark = false }) {
+  const glyph = dark ? 'rgba(255,255,255,0.7)' : '#595959';
+  const sugg = dark ? 'rgba(255,255,255,0.6)' : '#333';
+  const keyBg = dark ? 'rgba(255,255,255,0.22)' : 'rgba(255,255,255,0.85)';
+
+  // special-key icons
+  const icons = {
+    shift: <svg width="19" height="17" viewBox="0 0 19 17"><path d="M9.5 1L1 9.5h4.5V16h8V9.5H18L9.5 1z" fill={glyph}/></svg>,
+    del: <svg width="23" height="17" viewBox="0 0 23 17"><path d="M7 1h13a2 2 0 012 2v11a2 2 0 01-2 2H7l-6-7.5L7 1z" fill="none" stroke={glyph} strokeWidth="1.6" strokeLinejoin="round"/><path d="M10 5l7 7M17 5l-7 7" stroke={glyph} strokeWidth="1.6" strokeLinecap="round"/></svg>,
+    ret: <svg width="20" height="14" viewBox="0 0 20 14"><path d="M18 1v6H4m0 0l4-4M4 7l4 4" fill="none" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
+  };
+
+  const key = (content, { w, flex, ret, fs = 25, k } = {}) => (
+    <div key={k} style={{
+      height: 42, borderRadius: 8.5,
+      flex: flex ? 1 : undefined, width: w, minWidth: 0,
+      background: ret ? '#08f' : keyBg,
+      boxShadow: '0 1px 0 rgba(0,0,0,0.075)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      fontFamily: '-apple-system, "SF Compact", system-ui',
+      fontSize: fs, fontWeight: 458, color: ret ? '#fff' : glyph,
+    }}>{content}</div>
+  );
+
+  const row = (keys, pad = 0) => (
+    <div style={{ display: 'flex', gap: 6.5, justifyContent: 'center', padding: `0 ${pad}px` }}>
+      {keys.map(l => key(l, { flex: true, k: l }))}
+    </div>
+  );
+
+  return (
+    <div style={{
+      position: 'relative', zIndex: 15, borderRadius: 27, overflow: 'hidden',
+      padding: '11px 0 2px',
+      display: 'flex', flexDirection: 'column', alignItems: 'center',
+      boxShadow: dark
+        ? '0 -2px 20px rgba(0,0,0,0.09)'
+        : '0 -1px 6px rgba(0,0,0,0.018), 0 -3px 20px rgba(0,0,0,0.012)',
+    }}>
+      {/* liquid glass bg — same recipe as nav pills */}
+      <div style={{
+        position: 'absolute', inset: 0, borderRadius: 27,
+        backdropFilter: 'blur(12px) saturate(180%)',
+        WebkitBackdropFilter: 'blur(12px) saturate(180%)',
+        background: dark ? 'rgba(120,120,128,0.14)' : 'rgba(255,255,255,0.25)',
+      }} />
+      <div style={{
+        position: 'absolute', inset: 0, borderRadius: 27,
+        boxShadow: dark
+          ? 'inset 1.5px 1.5px 1px rgba(255,255,255,0.15)'
+          : 'inset 1.5px 1.5px 1px rgba(255,255,255,0.7), inset -1px -1px 1px rgba(255,255,255,0.4)',
+        border: dark ? '0.5px solid rgba(255,255,255,0.15)' : '0.5px solid rgba(0,0,0,0.06)',
+        pointerEvents: 'none',
+      }} />
+
+      {/* autocorrect bar */}
+      <div style={{
+        display: 'flex', gap: 20, alignItems: 'center',
+        padding: '8px 22px 13px', width: '100%', boxSizing: 'border-box',
+        position: 'relative',
+      }}>
+        {['"The"', 'the', 'to'].map((w, i) => (
+          <React.Fragment key={i}>
+            {i > 0 && <div style={{ width: 1, height: 25, background: '#ccc', opacity: 0.3 }} />}
+            <div style={{
+              flex: 1, textAlign: 'center',
+              fontFamily: '-apple-system, system-ui', fontSize: 17,
+              color: sugg, letterSpacing: -0.43, lineHeight: '22px',
+            }}>{w}</div>
+          </React.Fragment>
+        ))}
+      </div>
+
+      {/* key layout */}
+      <div style={{
+        display: 'flex', flexDirection: 'column', gap: 13,
+        padding: '0 6.5px', width: '100%', boxSizing: 'border-box',
+        position: 'relative',
+      }}>
+        {row(['q','w','e','r','t','y','u','i','o','p'])}
+        {row(['a','s','d','f','g','h','j','k','l'], 20)}
+        <div style={{ display: 'flex', gap: 14.25, alignItems: 'center' }}>
+          {key(icons.shift, { w: 45, k: 'shift' })}
+          <div style={{ display: 'flex', gap: 6.5, flex: 1 }}>
+            {['z','x','c','v','b','n','m'].map(l => key(l, { flex: true, k: l }))}
+          </div>
+          {key(icons.del, { w: 45, k: 'del' })}
+        </div>
+        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+          {key('ABC', { w: 92.25, fs: 18, k: 'abc' })}
+          {key('', { flex: true, k: 'space' })}
+          {key(icons.ret, { w: 92.25, ret: true, k: 'ret' })}
+        </div>
+      </div>
+
+      {/* bottom spacer (emoji+mic area, icons omitted) */}
+      <div style={{ height: 56, width: '100%', position: 'relative' }} />
+    </div>
+  );
+}
+
+Object.assign(window, {
+  IOSDevice, IOSStatusBar, IOSList, IOSListRow, IOSKeyboard,
+});

package/skills/lark-apps/creative-design/starter-components/macos-window.jsx

@@ -0,0 +1,197 @@
+/* BEGIN USAGE */
+// MacOS.jsx — Simplified macOS Tahoe (Liquid Glass) window
+// Based on the macOS Tahoe UI Kit. No image assets, no dependencies.
+// Exports (to window): MacWindow, MacSidebar, MacSidebarItem, MacSidebarHeader, MacToolbar, MacGlass, MacTrafficLights
+//
+// Usage — wrap your app content in <MacWindow> to get the window chrome
+// (traffic lights + titlebar). Props: width, height, title, sidebar (pass a
+// <MacSidebar> element); compose MacToolbar/MacGlass inside as needed:
+//
+//   <MacWindow width={980} height={620} title="Documents"
+//              sidebar={<MacSidebar>…</MacSidebar>}>
+//     ...your app content...
+//   </MacWindow>
+/* END USAGE */
+
+const MAC_FONT = '-apple-system, BlinkMacSystemFont, "SF Pro", "Helvetica Neue", sans-serif';
+
+// ─────────────────────────────────────────────────────────────
+// Liquid glass primitive — blur + white tint + inset highlight
+// ─────────────────────────────────────────────────────────────
+function MacGlass({ children, radius = 296, dark = false, style = {} }) {
+  return (
+    <div style={{ position: 'relative', borderRadius: radius, ...style }}>
+      <div style={{
+        position: 'absolute', inset: 0, borderRadius: radius,
+        background: dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.35)',
+        backdropFilter: 'blur(40px) saturate(180%)',
+        WebkitBackdropFilter: 'blur(40px) saturate(180%)',
+        border: dark ? '0.5px solid rgba(255,255,255,0.12)' : '0.5px solid rgba(255,255,255,0.6)',
+        boxShadow: dark
+          ? '0 8px 40px rgba(0,0,0,0.2)'
+          : '0 8px 40px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4)',
+      }} />
+      <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Traffic lights (14px, Tahoe colors)
+// ─────────────────────────────────────────────────────────────
+function MacTrafficLights({ style = {} }) {
+  const dot = (bg) => (
+    <div style={{
+      width: 14, height: 14, borderRadius: '50%', background: bg,
+      border: '0.5px solid rgba(0,0,0,0.1)',
+    }} />
+  );
+  return (
+    <div style={{ display: 'flex', gap: 9, alignItems: 'center', padding: 1, ...style }}>
+      {dot('#ff736a')}{dot('#febc2e')}{dot('#19c332')}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Toolbar — title + single glass pill icon
+// ─────────────────────────────────────────────────────────────
+function MacToolbar({ title = 'Folder' }) {
+  return (
+    <div style={{
+      display: 'flex', gap: 8, alignItems: 'center', padding: 8, flexShrink: 0,
+    }}>
+      {/* title */}
+      <div style={{
+        fontFamily: MAC_FONT, fontSize: 15, fontWeight: 700,
+        color: 'rgba(0,0,0,0.85)', whiteSpace: 'nowrap', paddingLeft: 8,
+      }}>{title}</div>
+      <div style={{ flex: 1 }} />
+      {/* single action */}
+      <MacGlass>
+        <div style={{
+          width: 36, height: 36, display: 'flex',
+          alignItems: 'center', justifyContent: 'center',
+        }}>
+          <div style={{ width: 14, height: 14, borderRadius: '50%', background: '#4c4c4c', opacity: 0.4 }} />
+        </div>
+      </MacGlass>
+      {/* search */}
+      <MacGlass>
+        <div style={{
+          width: 140, height: 36, display: 'flex', alignItems: 'center',
+          gap: 6, padding: '0 12px',
+        }}>
+          <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+            <circle cx="5.5" cy="5.5" r="4" stroke="#727272" strokeWidth="1.5"/>
+            <path d="M8.5 8.5l3 3" stroke="#727272" strokeWidth="1.5" strokeLinecap="round"/>
+          </svg>
+          <span style={{
+            fontFamily: MAC_FONT, fontSize: 13, fontWeight: 500, color: '#727272',
+          }}>Search</span>
+        </div>
+      </MacGlass>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Sidebar — frosted glass panel floating inside the window
+// ─────────────────────────────────────────────────────────────
+function MacSidebarItem({ label, selected = false }) {
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: 6,
+      height: 24, padding: '4px 10px 4px 6px', margin: '0 10px',
+      borderRadius: 8, position: 'relative',
+      fontFamily: MAC_FONT, fontSize: 11, fontWeight: 500,
+    }}>
+      {selected && (
+        <div style={{
+          position: 'absolute', inset: 0, borderRadius: 8,
+          background: 'rgba(0,0,0,0.11)', mixBlendMode: 'multiply',
+        }} />
+      )}
+      <div style={{
+        width: 14, height: 14, borderRadius: '50%',
+        background: selected ? '#007aff' : 'rgba(0,0,0,0.4)',
+        opacity: selected ? 1 : 0.5, flexShrink: 0, position: 'relative',
+      }} />
+      <span style={{ color: 'rgba(0,0,0,0.85)', position: 'relative' }}>{label}</span>
+    </div>
+  );
+}
+
+function MacSidebar({ children }) {
+  return (
+    <div style={{
+      width: 220, height: '100%', padding: 8, flexShrink: 0,
+      position: 'relative', display: 'flex', flexDirection: 'column',
+    }}>
+      {/* glass panel */}
+      <div style={{
+        position: 'absolute', inset: 8, borderRadius: 18,
+        background: 'rgba(210,225,245,0.45)',
+        backdropFilter: 'blur(50px) saturate(200%)',
+        WebkitBackdropFilter: 'blur(50px) saturate(200%)',
+        border: '0.5px solid rgba(255,255,255,0.5)',
+        boxShadow: '0 8px 40px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.35)',
+      }} />
+      {/* content */}
+      <div style={{
+        position: 'relative', zIndex: 1, padding: '10px 0',
+        display: 'flex', flexDirection: 'column', gap: 2,
+      }}>
+        {/* window controls + sidebar toggle */}
+        <div style={{
+          height: 32, display: 'flex', alignItems: 'center',
+          justifyContent: 'space-between', padding: '0 10px', marginBottom: 4,
+        }}>
+          <MacTrafficLights />
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function MacSidebarHeader({ title }) {
+  return (
+    <div style={{
+      padding: '14px 18px 5px',
+      fontFamily: MAC_FONT, fontSize: 11, fontWeight: 700,
+      color: 'rgba(0,0,0,0.5)',
+    }}>{title}</div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Window — r:26, big shadow, sidebar + toolbar + content
+// ─────────────────────────────────────────────────────────────
+function MacWindow({
+  width = 900, height = 600, title = 'Folder',
+  sidebar, children,
+}) {
+  return (
+    <div style={{
+      width, height, borderRadius: 26, overflow: 'hidden',
+      background: '#fff',
+      border: '1px solid #DEE0E3',
+      display: 'flex', position: 'relative',
+      fontFamily: MAC_FONT,
+    }}>
+      <MacSidebar>{sidebar}</MacSidebar>
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+        <MacToolbar title={title} />
+        <div style={{ flex: 1, overflow: 'auto', padding: '4px 8px' }}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Object.assign(window, {
+  MacWindow, MacSidebar, MacSidebarItem, MacSidebarHeader,
+  MacToolbar, MacGlass, MacTrafficLights,
+});